event.stopPropagation(); doesn't behave as expected

Question

I read couple articles related to event.stopPropagation(); but none of the solutions provided works for me. Basically what I have is an accordion widget with all the elements collapsed by default. On each element header (dt tag) there is also a checkbox. Clicking the checkbox shouldn't trigger the accordion to make its elements expand.

<dt data-toggle="collapse">
<span class="subscribe-checkbox"><button type="button" class="btn toggle-btn" data-toggle="button"></button></span>
</dt>
<dd>
<p>Accordion content...</p>
</dd>

Clicking the span (which should act as a checkbox) should add class "checked" to it. However it also expands the accordion element (dd tag). What I'm doing in jQuery is:

$('.accordion-group .btn.toggle-btn').click(function (event) {
event.stopPropagation();
});

While the accordion content isn't shown (which is good) the <span> element doesn't change class either, so it doesn't become 'checked'. I tried with .live() too and didn't work either.

Answer 1

You have to use addEventListener and then use the boolean Capture argument to control the behaviour of parent elements.

Answer 2

stopPropagation() does not work because the <dd> is not a parent to the <span> , so the event does not propagate from the <span> to the <dd> .

You'll have to restructure the handlers a little bit, maybe remove the click handler for the parent element of this whole code, and add a new handler for the <dd>