0

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/

Jonas Björk
  • 1
  • 1

1 Answers1

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 :)

Community
  • 1
  • 1
Scotsman
  • 177
  • 1
  • 9
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – Patt Mehta Jun 21 '15 at 02:28
  • Disagree. My code actually directly shows how to add an element in a div to a Jquery Mobile collapsible header and have the click event of the header not trigger. Before you criticize, I suggest you do your due diligence and try to help (which is what I was doing). – Scotsman Jun 21 '15 at 04:02