停止传播到附加元素

Question

Updated:

I don't understand why this stopPropagation is not preventing bubbling.

http://jsfiddle.net/E6NS5/6/

$('#content').click(function () {
    alert('prop failed');
});


$('#wrapper').on('click', '.button', function (e) {
    e.stopPropagation();
    alert('test clicked');

});

HTML

<div id="wrapper">
    <div id="content">
        <div id="test" class="button">Top Button</div>
    </div>
</div>

Answer 1

You want the .stopPropagation() call in the event handler for #content , not #wrapper :

var test = '<div id = "test" class = "button">Test</div> ';
$('#content').click(function (e) {
    e.stopPropagation();
    alert('prop failed');
});
$('#content').append(test);
$('#wrapper').on('click', '.button', function () {
    alert('test clicked');
});

jsFiddle example

Answer 2

The problem is that both events are bind with the "wrapper" class. In this example, the on key word will start with the wrapper class and filter the descendent rather than trigger the event for the .button - thus stopPropagation will not work jsfiddle because they are both at the same level.

$('.button').on('click', function (e) {
alert('test clicked');

e.stopPropagation();
});

More information at jquery api