dom更改后.click（）失败

我在网上搜索但我没有找到任何答案，因为这个“问题”不是关于.on（）和.click（）之间差异的常见问题。 使用jquery 2.1.3时，click函数是on.("click", handler)的缩写on.("click", handler)因此它应该在dom更改后触发函数（或wathever）。 但这只有在我使用.on（）时才有效。 为什么？ （以下示例）

 $('#button1').click(function() { $('div').html("
Hello
"); }); $('#button2').click(function() { alert(0); //THIS DOESN'T WORK }); $(body).on("click", "#button2", function() { alert(0); //THIS WORKS! }); 

Answer 1

但这只有在我使用.on（）时才有效。

首先，你应该意识到：

如果

 $('#button2').click(function() { alert(0); }); 

来之后

 $('#button1').click(function() { $('div').html("
Hello
"); }); 

喜欢 ：

  $('#button1').click(function() { $('div').html("
Hello
"); $('#button2').click(function() { alert(0); }); }); 

然后它会工作。

你在最后一个代码中所做的事情是将处理程序附加到因为事件传播而正在工作的body元素。

你的代码正在工作beacuse on允许你做选择器匹配+将单个处理程序附加到body元素。

Answer 2

答案是如果您动态添加数据，则必须使用.on函数。 使用此代码，您可以使用最后提到的代码来使用事件委派概念。 由于DOM尚未注册，因此.click处理程序无法捕获新的DOM元素。

Answer 3

 $('#button1').click(function() { $('div').html("
Hello
"); }); $('#button2').click(function() { alert(0); //THIS DOESN'T WORK }); $(document).on("click", "#button2", function() { alert(0); //THIS WORKS! }); 

这是正确的代码

https://jsfiddle.net/hhe3npux/