.click() 在 dom 更改后失败答案

【问题标题】：.click() fails after dom change.click() 在 dom 更改后失败
【发布时间】：2026-02-11 15:25:01
【问题描述】：

我在网上搜索但没有找到任何答案，因为这个“问题”不是关于 .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!
});

【问题讨论】：

即使它是on(event, handler) 的简写，您仍然将它附加到尚不存在的$('#button2')；这就是为什么有on(event, selector, handler)
您应该使用on 来动态创建元素。
@hamed 你也可以使用click 但是你不会有选择器匹配：jsbin.com/cifomehula/2/edit

标签： jquery dom click

【解决方案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/

【讨论】：

【解决方案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); 
      });
    });

然后它会工作。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：