dom更改后.click()失败

Question

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

$('#button1').click(function() {
    $('div').html("<p id="button2">Hello</p>");
});

$('#button2').click(function() {
    alert(0); //THIS DOESN'T WORK
});

$(body).on("click", "#button2", function() {
    alert(0); //THIS WORKS!
});

Answer 1

$('#button1').click(function() {
    $('div').html("<p id='button2'>Hello</p>");
});

$('#button2').click(function() {
    alert(0); //THIS DOESN'T WORK
});

$(document).on("click", "#button2", function() {
    alert(0); //THIS WORKS!
});

这是正确的代码

https://jsfiddle.net/hhe3npux/

Answer 2

但这仅在我使用 .on() 时才有效。

首先，您应该认识到：

如果

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

紧接着​

$('#button1').click(function() {
    $('div').html("<p id="button2">Hello</p>");
});

喜欢 ：

   $('#button1').click(function() {
        $('div').html("<p id="button2">Hello</p>");
        $('#button2').click(function() {
          alert(0); 
      });
    });

然后它就会起作用。

您在上一个代码中所做的事情是将处理程序附加到由于事件传播而正在工作的 body 元素。

您的代码正在工作，因为on允许您进行选择器匹配+将单个处理程序附加到 body 元素。