jQuery Mobile collapsible heading with clickable overlay

Question

I am trying to overlay a button on the right side on top of a jQuery Mobile Collapsible heading but can not get the click event to trigger. When I click on the div, only the click event of the collapsible header is triggered. If I overlay the same div on some other element with a click listener I can get it to work (see jsfiddle), but not on top of the collapsible heading. How can I make this work?

This is the HTML code ...

<div data-role="collapsible">
  <h2>Heading
    <div class="clickable" id="clickable">Click</div>
  </h2>
  <p>Content</p>
</div>

... and the JavaScript to add the listener ...

$(document).on('click', '#clickable', function (e) {
  alert('clickable');
});

... and finally the CSS used ...

.clickable {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  right: 0px;
  top: 0px;
  background-color: #fff;
  z-index: 1000;
}

Here is a demo: http://jsfiddle.net/nmp4Lrnt/

Answer 1

This may help you....

https://stackoverflow.com/questions/30954896/jquery-mobile-collapsible-header-link-selection-results-in-header-selection-high

And to satisfy the critics below ;) here is the piece of code you need from my other post. Adding the following to your 'icon' (or the div wrapper put around it) will prevent the default behaviour of expanding the collapsible:

$("#clickable").bind("click", function (e) {
       e.stopImmediatePropagation();
       e.stopPropagation();
       e.preventDefault();

Hope it works for you!

I have another issue in my post (which may also affect you), but I've managed to get a clickable 'icon' into a JQuery Mobile collapsible header :)