停止传播不适用于可点击div内的链接

Question

我有一个需要点击的链接位于已经有点击功能的div中，我已经模仿here。

现在在我的代码中，需要单击的链接具有类remove-tag，在将脚本运行到外部元素search-box时会注入该类。

参考早期的SO问题：

jquery: keep <a> link clickable in clickable div

我在我的代码中应用了类似的逻辑：

$('.remove-tag').click(function(event){
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

我也尝试了event.stopPropagation();，但这不起作用，点击链接仍然执行外部div的功能，这在技术上是一种下拉式系统。

Answer 1

好的，我们走了：

$('.search-box').on('click', '.remove-tag', function(event){
    event.stopPropagation();
    $(this).parent().remove();
});

JSFIDDLE：http://jsfiddle.net/snr9D/4/

由于您稍后将该元素添加到DOM，因此您需要使用delegated handler将事件绑定到该域。

Answer 2

stopImmediatePropagation工作正常，真正的问题是因为你的点击事件处理程序没有被触发。

因为您要将元素动态添加到DOM中而未被触发。

在这种情况下，您必须使用jQuery on的事件委派。

价：

  

大多数浏览器事件从最深处传播或传播   文档中最里面的元素（事件目标）   一直到身体和文档元素。在互联网上   Explorer 8及更低版本，更改和提交等一些事件不会   原生泡沫，但jQuery修补这些泡沫和创建   一致的跨浏览器行为。

     

如果省略selector或为null，则将事件处理程序称为   直接或直接约束。每次事件都会调用该处理程序   发生在所选元素上，无论它是直接出现在   来自后代（内部）元素的元素或气泡。

     

提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。 jQuery从事件目标起泡事件   到附加处理程序的元素（即最里面的）   最外面的元素）并为其中的任何元素运行处理程序   匹配选择器的路径。

代码：

$('.search-box').on('click','.remove-tag',function (event) {
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

演示：http://jsfiddle.net/M3HdC/

Answer 3

创建时，您不会将click事件绑定到.remove-tag元素。

只需在将元素追加到正文的方法中运行：

$('.remove-tag').click(function(event){
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

JSFiddle