.click() non riesce dopo il cambio dom

Question

Ho cercato sul Web ma non ho trovato alcuna risposta poiché questo "problema" non è il solito sulla differenza tra .on() e .click(). Con jquery 2.1.3 la funzione clic è una funzione abbreviata per on.("click", handler) quindi dovrebbe attivare una funzione (o wathever) dopo che la dom è stata modificata. Ma funziona solo se uso .on(). Perché? (Esempio di seguito)

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

Ma questo funziona solo se uso .on().

Prima di tutto, si dovrebbe capire che:

Se

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

arriva dopo

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

come:

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

Quindi funzionerà.

la cosa che hai fatto nell'ultimo codice è l'associazione del gestore all'elemento body che sta funzionando a causa della propagazione dell'evento.

il tuo codice sta funzionando perché il on consente di eseguire la selezione del selettore + il collegamento di un singolo gestore all'elemento del corpo.

Answer 2

La risposta è che se hai aggiunto i dati in modo dinamico, quindi è necessario utilizzare la funzione .on. Con questo codice, è possibile utilizzare il concetto di delega dell'evento utilizzando il codice che si menziona alla fine. Poiché il DOM non è ancora registrato, il gestore di .click non può acquisire il nuovo elemento DOM.

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

Questo è corretto codice

https://jsfiddle.net/hhe3npux/