Why is .click() and on("click") behaving differently on a bootstrap collapse button?

I'm trying to add a click event to a a bootstrap button that will do some stuff and then flush the event by returning false. This means I don't want the bootstrap effect that happens automatically to happen at all. I will control this programatically inside the click event based on some conditions. This means that I need to flush the event after I'm done with it so that the bootstrap collapse that happens on click will never happen.

My problem is the following. If I use $("my-button").click(...); this catches the event before the collapse has been toggled and I can flush the event after I've done what I want.

However I need to use the on("click", ...); because I need this event to occur with dinamically added buttons.

My problem is that the on("click", ...); doesn't work like the .click(...) and when it catches the event the hidden div has already collapsed which I don't want.

I've made a simple example to demonstrate my problem: https://jsfiddle.net/vo1npqdx/368/.

$(document).ready(function() {
  $("#collapse-button").click(function() {               
    debugger;
    //Do my stuff
    return false; // successfully prevents bootstrap animation.
  });

   $(document).on("click", "#collapse-button", function () {
    debugger;
    //Do my stuff
    return false; // doesn't prevent animation
   });
   // These catch the click event at different times!
});

Is there any possible workaround to this situation?