Capturing events ignoring a given class

Shows how to ignore a given class but also the effects of event bubbling.

by Ivan Melgrati

HTML

<div id="mydiv">
    <div>I'm not disabled</div>
    <div class="disabled">I'm disabled but...<span>I'm an enabled child (<span class="disabled">I'm disabled but the event does not bublle because catch it and prevent propagation</span>)</span></div>
    <div class="disabled">I'm disabled too</div>
    <div>I'm not disabled</div>
</div>
<div id="log"></div>

JavaScript

$("#mydiv :not(.disabled)").on("click", function (event) {
    $('#log').append('<p>click</p>');
    event.stopPropagation(); // Prevents multiple-firing of event
});

$("#mydiv .disabled").on("click", function (event) {
    event.stopPropagation(); // Prevents bubbling up of event
});