Comment déclencher un événement sur un élément cloné / inséré dans le DOM?

Question

Je ne suis pas capable de déclencher un événement sur l'élément que j'ai cloné/inséré dans le DOM.

Vérifiez le fiddle ici.

HTML:

[C'EST LE DIV A]
CLIQUEZ POUR CLONER LE DIV A

jQuery:

$('.A').on("click",null,function() {    
    alert('CLIC SUR DIV A');           
});

$('.B').on("click",null,function() {        
    $('.A').clone().insertAfter('.A');          
});

Si je clique sur un DIV A cloné, rien ne se passe.

Comment puis-je déclencher un événement sur un élément cloné ?

Answer 1

Il y a deux solutions que je propose.

Tout d'abord, et la meilleure option dans ce cas, serait d'ajouter l'argument true à clone(), par exemple dans ce cas ce serait:

$('.A').clone(true).insertAfter('.A');

Comme premier argument de clone() représente:

"Un booléen indiquant si les gestionnaires d'événements et les données doivent être copiés avec les éléments. La valeur par défaut est false." - Section API jQuery pour clone().

Cela signifie que tous les événements liés seront conservés sur chaque élément cloné.

jsFiddle ici.

---

La deuxième option, probablement pas la meilleure solution pour cet exemple, serait d'utiliser la fonction de délégation d'événements de on():

"Les événements délégués ont l'avantage de pouvoir traiter les événements des éléments descendants qui sont ajoutés au document ultérieurement." - Section API jQuery pour on().

Dans ce cas:

$(document).on("click", ".A", function() { ...

Maintenant, chaque nouvel élément avec la classe .A aura cet événement de clic attaché à lui, même les éléments clonés.

jsFiddle ici.