jQuery mobile button inside collapsible header

Question

I would really appreciate if somebody could help me. I am trying to dynamically build a collapsible block with jQuery mobile 1.2 Beta (using jQuery 1.7.1).

Now I have the problem that I want to have an button inside a collapsible header and all works fine but when I click on the button the click event I set on it is not fired but instead the block gets uncollapsed or collapsed.

$('#main').append('<div data-role="collapsible" data-theme="c" data-content-theme="c" id="pflicht_' 
+ identifier + '" pflichtID="' + val.guid + '">' +
'<h3 style="white-space: normal;" id="inner_header_' + identifier + '">' 
+ header + ': ' + val.pflichtBezeichnung + ' (' + val.Intervall + ' - ' + val.IntModus + ') ' 
+ val.pflichtNummer + '.' + val.pflichtZusatz + 
'<button type="button" data-inline="true" id="ok" pflichtID="' 
+ val.guid + '" identifier="' + identifier + '" >Ok</button></h3>' +
'</div>'

$("#ok").live('click', function () {
                  alert("ok");
              });

What do I have to do to get the click event of the button?

Thanks for your help!

Could you format your code a bit, it will become clear and easier to check?:D — Piotr Krysiak
– Piotr Krysiak, Commented Sep 14, 2012 at 12:51

Jack · Accepted Answer · 2012-09-14 14:12:42Z

4

First off you should realize that .live has been deprecated in favor of on.

That said to understand what's going on here you need to understand how event delegation works in general and live in particular, when you use event delegation you bind your event to a higher level in the DOM (some parent element) and then because events bubble up you check the originating event to see if it matches the specified selector.

The .live method works by binding the event to the document (so it is always bound to a parent element) and then when an event bubbles up to the document it checks to see if it matches the selector specified. The issue in your case is that something (probably the collapisple header) is swallowing up the click event so that it never reaches the document.

The solution is pretty simple, either bind directly to the button, or delegate to a lower level in the DOM, somewhere where your event will reach.

For example

$('#inner_header_' + identifier).on('click', '#ok', function(e) {
    alert('ok');
});

If you don't want the header to expand and collapse when you click the button, just stop the event from bubbling up further, which you can do using the stopPropagation() method

For example

$('#inner_header_' + identifier).on('click', '#ok', function(e) {
    alert('ok');
    e.stopPropagation()
});

answered Sep 14, 2012 at 14:12

Jack

11k13 gold badges52 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

smatyas Over a year ago

Thank you very much for your answer, your first suggestion works great except that the block gets expanded ... if I use the e.stopPropagation() then I get thrown back to my login screen ... but that maybe has something to do that I am using MVC ASP.NET in combination with jQuery Mobile ... I am not sure

smatyas Over a year ago

e.preventDefault(); in combination with e.stopPropagation() did the trick :) ... Thanks again for your help!!

Jack Over a year ago

Glad that worked out for you, I was going to suggest maybe using stopImmediatePropagation() instead. At any rate you can accept an answer by ticking off the check-mark to the left of the answer.

Collectives™ on Stack Overflow

jQuery mobile button inside collapsible header

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related