jQuery：在这种情况下，.on（）的正确用法是什么？

考虑下面的标记：jQuery：在这种情况下，.on（）的正确用法是什么？

<div class="parent"> 
    <div class="child"> 
     button 
    </div> 
</div>

我需要在对child类click事件运行功能，我有以下两种选择：

$(".parent").on("click", ".child", function(){....});

和

$(document).on("click", ".child", function(){....});

使用直接parent作为目标和document本身？对于我来说，使用document似乎是一个更强大的选项（如果父类更改了） - 只需要确保它不会导致问题，如果我开始在任何地方使用此方法。

P.S.该child动态添加parent因此里面我用.on()

来源

2014-03-01 user1775598

你真的需要'开'吗？你动态添加元素吗？ – h2ooooooo

是的 - 孩子在家长内部动态添加 - 现在将添加到这个问题。 – user1775598

关于两者之间的性能没有真正的区别，即使通常优选将事件绑定到最接近的静态容器 –

$(".parent").on("click", ".child", function(){....});

结合的Click事件只与类“.parent”是文档中存在的这些元素，而该事件从目标冒泡（ '.child'）添加到处理程序所在的元素。这比将它添加到文档受欢迎得多，将其添加到文档像

$(document).on("click", ".child", function(){....});

气泡文档中的目标，他们会出现一路上涨的身体和文档元素的click事件。
正如@Woff所提到的，绑定处理程序在删除.parent元素时不会被删除。

来源

2014-03-01 13:53:39 rakhi4110

为了澄清，没有任何东西被绑定到'.child'，在这两种情况下，事件侦听器都附加到初始目标;无论是'.parent'还是'document'。然后当点击事件通过DOM冒泡时被捕获，并且如果event.target匹配'.child'选择器，则委托给正确的'event.target'。出于这个原因，对于大多数浏览器来说，添加到“.parent”中的性能会随着反应时间的增加而增加，但会略微。 – Pebbl

@pebbl。谢谢。这是我的一个疏忽。 – rakhi4110

没问题+1 :) – Pebbl

“性能”不应该是你的情况的问题。

还有就是你两个选择之间的明显差异：

<div class="parent"> 
    <div class="child" id="A"> 
     button 
    </div> 
</div> 
<div class="child" id="B"> 
    button 
</div>

如果绑定处理程序上document，点击#B将触发处理程序。
如果你在.parent上绑定你的处理程序，点击#B将不会触发处理程序。

您必须决定是否要听文档中标记为.child类的所有节点，或者仅嵌套在.parent元素下的节点。

考虑到其他景点：

恕我直言，这是最好的缩小尽可能您的行动范围。从你的问题来看，$('.parent')似乎是最好的目标。
但是，如果您的.parent元素也是动态添加/删除的，请不要将它们用作绑定目标。尝试定位您创建的其他节点，但它将始终保留在DOM中（例如：将您的html包装在#myModule div中，并将您的事件绑定到$('#myModule')）。
.stopPropagation()：委托与直接绑定的主要区别在于，处理程序在事件冒泡到目标节点时执行。
如果您依赖.stopPropagation()或return false来阻止其他处理程序的执行，这会影响事件实际停止的时间。
这是一个fiddle来说明这一点。

来源

2014-03-03 11:07:24 LeGEC

jQuery：在这种情况下，.on（）的正确用法是什么？

回答

相关问题