停止传播不可用于可点击div内的链接 [英] Stop Propagation not working for link inside clickable div

问题描述

我有一个需要点击的链接位于一个已经有一个点击函数的div中，我已经模拟 here 。

现在在我的代码中，需要点击的链接有 remove-tag ，它在将脚本运行到外部元素搜索框时注入。

引用之前的SO问题：

jquery：keep< a>可点击的div中的链接可点击

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

  $（'。remove-tag'）。click（function（event）{
 event.stopImmediatePropagation（）; 
 $（this）.parent ; 
}）; 
  

我也尝试过 event.stopPropagation（）; ，但是这不工作，点击链接仍然执行外部div的功能，这在技术上是一个下拉类系统。

解决方案

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

不会触发，因为您要动态添加元素到DOM。

请使用jQuery 在 上使用事件委托。 p>

参考：

大多数浏览器事件会从最深处，
文档中出现
的最内层元素（事件目标）
一直到body和document元素。在Internet
Explorer 8和更低版本中，一些事件，如更改和提交不会
本机bubble，但jQuery补丁这些泡沫和创建
一致的跨浏览器行为。

如果省略selector或者null，事件处理程序被称为
direct或者直接绑定。每当事件
发生在选择的元素上时，处理程序被调用，无论它直接发生在
元素上还是来自后代（内部）元素。

当提供选择器时，事件处理程序称为
委托。当事件直接发生在
上的绑定元素时，不会调用处理程序，但仅对于
与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标上升
到处理程序附加的元素（即，最内层到
最外层元素），并沿着
路径匹配选择器运行任何元素的处理程序。

代码：

  $（'。search-box'）。on（'click'，'。remove-tag'，function（event）{
 event.stopImmediatePropagation（）; 
 $（this）.parent .remove（）; 
}）; 
  

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

I've got a link that needs to be clicked situated inside a div that already has a function on click which I've emulated here.

Now in my code, the link that needs to be clicked has class remove-tag which is injected on running the script to the outer element search-box.

Referencing the earlier SO question of:

jquery: keep <a> link clickable in clickable div

I applied similar logic to my code here:

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

I also tried event.stopPropagation();, but this doesn't work and clicking on the link still performs the function of the outer div which is technically a drop down sort of system.

解决方案

The stopImmediatePropagation is working fine, the real problem is because your click event handler is not fired.

Is not fired because you are adding dynamically your elements to the DOM.

In this case you have to use event delegation with jQuery on.

Ref:

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Code:

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

Demo: http://jsfiddle.net/M3HdC/

这篇关于停止传播不可用于可点击div内的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！