Jquery - 将委托绑定到所有"a"标记

Question

click()当你点击div中的链接时,我试图阻止jq .

HTML

<div id="all">
    <div id="test">
        <a href="http://google.de">google</a>
    </div>
</div>

JS

$('#test').click(function() { alert('only when i click the div');  });

$('a').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});       

这段代码效果很好但我的内容是动态的,所以我需要一个delegate()解决方案.

下面的代码不起作用.但为什么？有什么问题？

$('#all').delegate("a", "click", function(e)
{
    e.stopPropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});

示例
http://jsfiddle.net/Lf3hL/13/

Answer 1

stopPropagation不适用于委托 - http://api.jquery.com/event.stopPropagation/

由于.live()方法在事件传播到文档顶部后处理事件,因此无法停止实时事件的传播.同样,.delegate()处理的事件将传播到它们被委派给的元素; 在DOM树中它下面的任何元素上绑定的事件处理程序将在调用委托事件处理程序时执行.因此,这些处理程序可以通过调用event.stopPropagation()或返回false来阻止委托处理程序触发.

现在,如果您更改测试,请单击以使用委托并使用stopImmediatePropagation,它将起作用

$('#all').delegate('#test', 'click' ,function() {
    alert('only when i click on the div');
});    

$('#all').delegate("a", "click", function(e)
{
    e.stopImmediatePropagation();
    e.preventDefault();
    $('body').append(e.target.href);
}); 

http://jsfiddle.net/Lf3hL/14/