.click() fails after dom change

Question

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!
});

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!
});

This is correct code

https://jsfiddle.net/hhe3npux/

Answer 2

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.

Answer 3

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.