使用.on（）进行点击事件的奇怪行为 - 两次被解雇

Question

我已经检查了两次点击事件的答案。但我对使用.on()。

有疑问

通常，我在动态添加的元素上使用它，并且它总是正常工作：

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

在我正在制作的当前网站上，我多次使用它。但是在我试图实现的功能中，让我们说，动态＆＃34;跳转到页面＆＃34;，点击页码会被触发两次：

$(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");
}); 

在这种情况下，单击处理程序在文档对象上设置。因此，无论何时单击页面上的某个位置，它都会触发并查找＆＃34; .jumpTo .number＆＃34;里面的元素。如果找到它，它将检查点击是否在其上并且您的功能将执行。

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

此处点击处理程序将在.jumpTo

上

由于Al.G说可能这个代码被多次执行，所以你实际上多次添加该处理程序，因此双重触发。 解决问题的一种方法是做这样的事情：

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

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