Question

I have a few smaller div nested within a larger div. 1 specific small div #smalland the large div #large have jQuery click() event handler attached to them.

Problem: How do I make it such that when a click happens inside that one smaller nested div, the click() handler of the larger div is not fired, only the one for the smaller div is? The click() of the larger div must still fire if the click occurs in the other smaller divs.

HTML

<div id="large">
    <div id="small"></div>
    <div id="small_2"></div>
    <div id="small_3"></div>
</div>

jQuery

$("#large").click(function() {
    console.log('large');
}

$("#small").click(function() {
    console.log('small');
}

Answer 1

$("#small").click(function(e) {
    e.stopPropagation();
    console.log('small');
}

http://api.jquery.com/event.stopPropagation/