jQuery mobile collapsible button in header, stop collapse/expand

Question

I want to place a button in a jQuery collapsible's header.

Of course, when I do that, pressing the button also makes the collapsible expand/collapse. I found the solution to be

e.stopPropagation();
e.stopImmediatePropagation();    

I took it from here: adding the button to the collapsible set and getting the value of the collapsible element

However there's a problem. When the collapsible is on a page that has been loaded as such:

$.mobile.changePage("#second", {transition : "pop", role : "page"});

Then, using stopPropagation immediately causes jquery-mobile to swtich to the original page (the index page for example).

Here is an example (forked from the jsfiddle provided in the link above) that demonstates the problem that I'm encountering: http://jsfiddle.net/ga5f86mm/1/

So just to reiterate, I want to be able to place a button in the header of a jquery-mobile collapsible without causing it to collapse/expand on a click of that button.

Answer 1

Firstly, my apologies; I didn't mean to update your Fiddle, I meant to fork it, but alas Update it I did...

Anyway, add:

e.preventDefault();

http://jsfiddle.net/ga5f86mm/2/