.click() 在 dom 更改后失败

Question

我在网上搜索但没有找到任何答案，因为这个 "problem" 不是关于 .on() 和 .click() 之间区别的常见答案。在 jquery 2.1.3 中，click 函数是 on.("click", handler) 的简写，因此它应该在 dom 更改后触发一个函数（或其他）。但这只有在我使用 .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

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

Answer 2

$('#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 3

But this works only if I use .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 允许您进行选择器匹配 + 将单个处理程序附加到 body 元素。

.click() 在 dom 更改后失败

.click() fails after dom change

jquery

dom

click