停止傳播到附加元素

Question

更新：

我不明白為什么這個stopPropagation不會阻止冒泡。

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

您希望在#content的事件處理程序中調用.stopPropagation() ，而不是#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例子

Answer 2

問題是兩個事件都與“包裝器”類綁定。 在這個例子中，on關鍵字將以包裝類開始並過濾后代而不是觸發.button的事件 - 因此stopPropagation將不起作用jsfiddle，因為它們都在同一級別。

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

e.stopPropagation();
});

有關jquery api的更多信息