Ajout à innerHTML de document.body provoque jQuery .on() pour ne pas trouver sa cible

Question

J'ai donc quelques trucs HTML générés dynamiquement. Si vous cliquez sur un bouton, il ajoute un code html qui a un autre bouton, et vous pouvez ajouter cet autre code html plusieurs fois, en générant plusieurs copies de celui-ci. Tout cela est à l'intérieur d'un tag <form>, donc je dois utiliser e.preventDefault() sur chaque bouton pour empêcher javascript d'essayer de soumettre les données. Chaque bouton a également son propre code pour onclick. Cependant, il y a un problème avec les javascript-added click events sur le contenu nouvellement généré. Si j'ai <button class="myBtn"></button>, puis en javascript j'ai $(".myBtn").click(...), cela fonctionnera très bien, mais seulement pour les boutons qui existent déjà lorsque le code javascript est exécuté, ce qui signifie que les boutons nouvellement générés n'auront pas l'événement joint. La solution à ce problème est trouvée here.

Nous arrivons maintenant au vrai problème. Tout cela fonctionne parfaitement, mais seulement jusqu'à ce que j'ajoute à document.body.innerHTML. Dès que j'exécute la ligne document.body.innerHTML += "Text", le code du lien ci-dessus ne s'exécute plus lorsque le bouton généré est cliqué.

J'ai un exemple ici: https://jsfiddle.net/6hvgatLy/1/

Answer 1

Vous réécrivant l'ensemble innerHTML du corps qui supprimera tous les écouteurs d'événements

Utilisez append() à la place

changement

$("#deadlyBtn").click(function(e){ 
    e.preventDefault(); 
    document.body.innerHTML += "Now try clicking [Add new Input]" 
}) 

Pour

$("#deadlyBtn").click(function(e){ 
    e.preventDefault(); 
    $('body').append("Now try clicking [Add new Input]") 
}) 

DEMO

Sinon, vous pouvez modifier votre délégation d'événement à un actif qui n'est pas écrasé comme body ou document

$(document).on("click", ".formDiv .innerContainer .innerBtn", function(e){ 
    e.preventDefault() 
    $(this).before($('<input type="text" placeholder="Textbox"/>')) 
})