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

Question

考虑以下标记：

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

我需要在click类的child事件上运行一个函数，我有以下两个选项：

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

和

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

使用直接parent作为目标与document本身之间的效果是否存在显着差异？使用document对我来说似乎是一个更健壮的选项（例如，如果更改了父类） - 如果我开始在所有地方开始使用此方法，只需要确保它不会导致问题。

P.S。 child在parent内动态添加，因此我正在使用.on()

Answer 1

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

将click事件绑定到文档中存在的类“.parent”的元素，并将事件从目标（'。child'）冒泡到附加处理程序的元素。这比将其添加到文档更好，因为将其添加到文档中

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

1. 将来自文档中目标的点击事件一直冒泡到身体和文档元素。

2. 正如@Woff所提到的，绑定处理程序在删除.parent元素时不会被删除。

Answer 2

“性能”不应该是您的问题。

您的两个选择之间存在明显差异：

 <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来说明这一点。