Jquery .click（）在dom更改后失败

我在网上搜索过，但没有找到任何答案，因为这个“问题”不是关于.on（）和.click（）之间区别的常见问题。 在jquery 2.1.3中，click函数是on的缩写。（“click”，handler），因此它应该在dom更改后启动一个函数（或wathever）。 但这只有在使用.on（）时才有效。 为什么？（下面的例子）

$（'#按钮1'）。单击（函数（）{
$（'div'）.html（“
Hello
”；
});
$（'#按钮2'）。单击（函数（）{
警报（0）；//这不起作用
});
$（正文）。在（“单击”，“按钮2”，函数（）上）{
警报（0）；//这有效！
});

答案是，如果动态添加数据，则必须使用

.on

函数。有了这段代码，您可以通过使用最后提到的代码来使用事件委派概念。由于DOM尚未注册，.click处理程序无法捕获新的DOM元素

$（'#按钮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!
});

$（'div'）.html（“
你好”
”；
});
$（'#按钮2'）。单击（函数（）{
警报（0）；//这不起作用
});
$（文档）。在（“单击”，“按钮2”，函数（）上）{
警报（0）；//这有效！
});

这是正确的代码

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

首先，你应该意识到：

如果

紧随其后

$（'#按钮1'）。单击（函数（）{
$（'div'）.html（“
Hello
”；
});

比如：

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

$（'#按钮1'）。单击（函数（）{
$（'div'）.html（“
Hello
”；
$（'#按钮2'）。单击（函数（）{
警报（0）；
});
});

那就行了

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

---

您的代码正在工作，因为

上的
允许您进行选择器匹配+将单个处理程序附加到body元素。
即使它是（事件，处理程序）
上的缩写
，您仍然将其附加到尚不存在的
$（“#按钮2”）
；这就是为什么（事件、选择器、处理程序）上有
的原因。
对于动态创建的元素，您应该使用
上的
。@hamed您也可以使用
单击
，但这样您就不会有选择器匹配：
$('#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); 
      });
    });