Jquery - 将委托绑定到所有“a”标签

Question

当您单击 div 中的链接时，我尝试阻止 jq click() 。

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/

Answer 2

因为 delegate() 的工作方式是让事件冒泡，然后在祖先元素上处理它们（在示例中为 #all）。

因此，由于事件已经冒泡，因此您无法阻止它们在源头传播（因为它们必须传播才能工作）。

Answer 3

来自 jQuery .delegate() 文档：

由于 .live() 方法在事件传播到
在文档的顶部，不可能停止传播
现场活动。类似地，由 .delegate() 处理的事件将传播
给他们被委托的部门；绑定的事件处理程序
DOM 树中位于其下方的所有元素都已被执行
当调用委托事件处理程序时。

一种可能的解决方案是不在 a 上附加事件处理程序，而是在 #test 上附加事件处理程序，并检查 event.target。

我已经用这种方法更新了你的Fiddle。

   $('#test').click(function(e) {
        if ($(e.target).is('a')) {
            alert('link was clicked');
        }
        else {
            alert('only when i click on the div');
        }

        e.preventDefault(); //just to cancel the link's default action
    });

Answer 4

live 和 delegate 函数无法像“正常”事件一样处理 e.stopPropagation(); 调用。来自委托 docs -

由于 .live() 方法在事件传播到
在文档的顶部，不可能停止传播
现场活动。类似地，由 .delegate() 处理的事件将传播
给他们被委托的部门；绑定的事件处理程序
DOM 树中位于其下方的所有元素都已被执行
调用委托事件处理程序时。这些处理者，
因此，可能会阻止委托处理程序触发
调用 event.stopPropagation() 或返回 false。

Answer 5

为什么不使用该

.live()

功能？

 $('a').live('click', function() {
     // Live handler called.
 });

这将为正文完全加载后添加的所有标签添加点击功能。