Gestionnaire d'événements bloqué après avoir changé body.innerHTML

Je voudrais changer du texte dans mon corps html avec le code ci-dessous. Le remplacement fonctionne correctement, mais après qu'il semble être bloqué, il ne peut plus fonctionner, donc les parties suivantes de mon script ne peuvent pas être exécutées.Gestionnaire d'événements bloqué après avoir changé body.innerHTML

Rien ne se produira après avoir cliqué sur un autre bouton. Je pense que le problème est avec la ligne qui change body.innerHTML parce que quand je supprime cette ligne tout fonctionne bien.

$(".do-replace-button").on("click", function() { 
    //some different code 
    document.body.innerHTML = document.body.innerHTML.replace(regExp, newWord); 
} 

$(".another-button").on("click", function (event) { 
    //some code that won't execute 
}

Source

2017-07-23 zazini

Vous utilisez 'innerHTML' dans le corps pour que le premier événement s'exécute, tous les autres gestionnaires sont supprimés. [Manipuler innerHTML supprime le gestionnaire d'événement d'un élément enfant?] (Https://stackoverflow.com/questions/5113105/manipulating-innerhtml-removes-the-event-handler-of-a-child-element) – Gerardo

Vous remplacez efficacement la innerHTML de votre <body> avec quelque chose d'autre, qui est une chaîne, le résultat de votre replace(). Cette chaîne est analysée et intégrée dans de nouveaux éléments DOM et les anciens sont remplacés par les nouveaux.

Par conséquent, les événements que vous avez liés sur les anciens ont disparu, car les éléments sont partis. Une façon de résoudre ce serait:

a) lient le document lui-même:

$(document).on('click', '.do-replace-button', function() { 
    // whatever... 
})

b) trouver une autre façon d'obtenir moins agressif tout ce que vous réalisez avec cette REPLACE.

Prenez note c'est non seulement vos événements qui supprimeront, mais tout événement lié par une bibliothèque/plug-in que vous pourriez avoir chargé et déjà initialisé au moment où votre script est exécuté. Je recommande fortement de ne pas exécuter replace sur innerHTML, notamment sur <body>.

Source

2017-07-23 01:28:56

L'appel à document.body.innerHTML et l'affectation de la main droite qui vient après qu'il remplace complètement le HTML à l'intérieur du document, ou plus précisément, l'analyseur construit un arbre de nœud complètement nouveau à l'intérieur du body de sorte que tous vos HTMLElement noeuds qui peuvent ont déjà eu des auditeurs d'événements qui leur sont assignés ne sont plus là. Je vous recommande d'utiliser une autre méthode de remplacement du HTML correspondant à votre expression rationnelle plutôt que du contenu HTML complet de l'élément body. Ou vous pourriez avoir une fonction qui est appelée dans le premier rappel d'écouteur d'événement qui se déclenche après le remplacement du corps HTML, qui va réinitialiser les écouteurs d'événement.

Source

2017-07-23 01:35:33

Gestionnaire d'événements bloqué après avoir changé body.innerHTML

Répondre

Questions connexes