找到你要的答案

Q:.click() fails after dom change

Q:()失败后的DOM的变化。

I searched on web but I didn't find any answer since this "problem" is not the usual one about the difference between .on() and .click(). With jquery 2.1.3 the click function is a shortand for on.("click", handler) so it should fire a function (or wathever) after the dom is changed. But this works only if I use .on(). Why? (Example below)

$('#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!
});

I searched on web but I didn't find any answer since this "problem" is not the usual one about the difference between .on() and .click(). With jquery 2.1.3 the click function is a shortand for on.("click", handler) so it should fire a function (or wathever) after the dom is changed. 但这只能本人使用。on()。 Why? (Example below)

$('#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!
});
answer1: 回答1:

But this works only if I use .on().

First of all , you should realize that :

If

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

comes after

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

like :

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

Then it WILL work.

the thing which you did in the last code is attaching the handler to the body element which is working because of event propagation.

your code is working beacuse on allows you to do selector matching + attaching single handler to the body element.

但这只能本人使用。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); 
      });
    });

然后它会工作。

上一个代码中所做的事情是将处理程序附加到正在运行的主体元素,因为事件传播。

你的代码是因为在允许你做选择器匹配+附加单处理器到体元。

answer2: 回答2:

The answer is if you added data dynamically, then you must use .on function. With this code, you can use event delegation concept by using the code that you mention at last. Since the DOM are not registered yet, the .click handler cant capture the new DOM element.

答案是如果你动态添加了数据,那么你就必须在函数上使用。使用此代码,您可以使用您最后提到的代码使用事件委托概念。因为DOM是尚未注册,单击处理程序无法捕捉的。新的DOM元素。

answer3: 回答3:
$('#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!
});

This is correct code

https://jsfiddle.net/hhe3npux/

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

jquery  dom  click