Question

I have a child div with class body_left_details which resides in a parent div with class body_left_bar. Both divs have an onclick event attached to them, but I want to prevent the bubbling of body_left_bar when you click on body_left_details. Here’s the relevant code:

$(function() {
    $('.body_left_bar').click(function() {
        body_right_load('parent');
    })
    $('.body_left_details').click(function(e) {
        e.stopPropagation();
        body_right_load('child');
    })
})
function body_right_load(str) {
    alert(str);
}​

Simple enough. But why is it that when I click on body_left_details, body_right_load(‘child’) is not called? I tested with an alert() directly after e.stopPropagation(), and it worked fine. Are external functions not allowed after stopPropagation? Would that be considered bubbling?

Testing on Windows 7 wamp in Chrome. Any insight appreciated!

EDIT: Relevant jsfiddle. Clicking on parent div will result in alert, but clicking on “Read about it” yields nothing.

Answer 1

$(function() {
    $('.body_left_bar').on('click', function() {
        body_right_load('parent');
    })
    $('.body_left_details').on('click', function(e) {
        e.stopImmediatePropagation();
        body_right_load('child');
    })
})
function body_right_load(str) {
    alert(str);
}​