javascript - 使用 .on() 作为点击事件的奇怪行为 - 触发两次

Question

我已经检查过有关两次触发点击事件的答案。但我有一个关于使用 .on() 的问题。

通常，我在动态添加的元素上使用它，它总是工作得很好:

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

在我目前正在开发的网站中，我多次使用它。但在我试图实现的功能中，比如说，动态“跳转到页面”，点击页码会被触发两次:

$(document).on("click", ".jumpTo .number", function(){
    console.log("Jump");
}); 

试图找到这种行为的根源，我尝试了这种工作正常的语法:

$(".jumpTo").on("click", ".number", function(){
    console.log("Jump");
});

谁能解释一下这两种不同的语法之间有什么区别(对我来说看起来很相似)？

还有可选，为什么 $(document).on("click", ".jumpTo .number", function(){}) 被触发两次？ (可选地，因为我无法在 Fiddle 中重现此行为，所以一切都按预期进行)。

Answer 1

$(document).on("click", ".jumpTo .number", function(){
    console.log("Jump");
}); 

在本例中，单击处理程序是在文档对象上设置的。因此，每当您单击页面上的某个位置时，它就会触发并在其中查找“.jumpTo .number”元素。如果找到它，它将检查是否单击了它，并且您的函数将执行。

$(".jumpTo").on("click", ".number", function(){
    console.log("Jump");
});

这里的点击处理程序将位于 .jumpTo

正如 Al.G 所说，这段代码可能会执行多次，因此您实际上多次添加该处理程序，因此会发生两次触发。 解决该问题的一种方法是执行以下操作:

$(".jumpTo").unbind("click").on("click"...

另一种方法是更改​​代码以确保 .on() 调用不会执行两次。