Panel: not possible to bind to button toggling a panel

[frequent]

Trying to bind to a button toggling a panel only works like this:

$(document).find(".action1").on("click", function() {
    alert("1");
});

The "normal" way,

$(document).on("click", ".action2", function () {
    alert("2")
});

does not trigger the alert.

JSBIN: here

Removing the JQM script tag will make both ways works as expected, so there must be something preventing the click to trigger courtesy of JQM.

The click is useful, for example to setting a pointer for content to display on click and loading the content on beforeOpen (works nicely with popups, so on panel, this is a bug to me)

[frequent]

Not sure this is a good practice fix, but removing the return false inside the panels _handleClick method would allow the click event to bubble up, while the preventDefault seems to prevent the browser from trying to make an Http request (on my latest FF).

_handleClick: function( e ) {
    var link,
      panelId = this.element.attr( "id" );

    if ( e.currentTarget.href.split( "#" )[ 1 ] === panelId && panelId !== undefined ) {

      e.preventDefault();
      link = $( e.target );
      if ( link.hasClass( "ui-btn" ) ) {
        link.addClass( $.mobile.activeBtnClass );
        this.element.one( "panelopen panelclose", function() {
          link.removeClass( $.mobile.activeBtnClass );
        });
      }
      this.toggle();
      //return false; -> Allow to bubble
    }
  },

[gabrielschulhof]

We need to figure out why we're not letting it bubble in the first place.

[gabrielschulhof]

OK. It looks like we're returning false in order to prevent the click routing from doing navigation. preventing default should suffice in this case.

[gabrielschulhof]

... because we've updated the click routing to not handle clicks for which the default has been prevented.

[frequent]

@gabrielschulhof : +1