Event-Handler stecken nach dem Ändern body.innerHTML

Ich würde gerne etwas Text in meinem Körper HTML mit Code unten ändern. Ersetzen funktioniert gut, aber danach scheint es zu stecken, kann nicht aus der Funktion, so dass die nächsten Teile meines Skripts nicht ausgeführt werden können.Event-Handler stecken nach dem Ändern body.innerHTML

Nach dem Klicken auf .another-button passiert nichts. Ich denke, dass Problem mit der Linie ist, die body.innerHTML ändert, weil, wenn ich diese Linie lösche, alles gut funktioniert.

$(".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 
}

Quelle

2017-07-23 zazini

Sie verwenden 'innerHTML' im Körper, also wenn das erste Ereignis ausgeführt wird, werden alle anderen Handler entfernt. [Manipulation innerHTML entfernt den Event-Handler eines Kindelements?] (Https://stackoverflow.com/questions/5113105/manipulating-innerhtml-removes-the-event-handler-of-a-child-element) – Gerardo

Sie ersetzen effektiv die innerHTML Ihrer <body> mit etwas anderem, was ein String ist, das Ergebnis Ihrer replace(). Diese Zeichenfolge wird analysiert und in neue DOM-Elemente eingebaut, und die alten werden durch die neuen ersetzt.

Daher sind die Ereignisse, die Sie an die alten gebunden haben, weg, weil die Elemente weg sind. Eine Möglichkeit, dies zu lösen wäre:

a) bindet auf Dokument selbst:

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

b) findet eine andere, weniger aggressive Art und Weise zu erreichen, was auch immer es ist, dass Sie mit, dass ersetzen erzielen.

Sie beachten Sie, es ist nicht nur Ihre Veranstaltungen, die entfernt, aber jede Ereignis von jeder Bibliothek/Plugin gebunden Sie geladen haben könnte und bereits durch die Zeit, Ihr Skript ausgeführt wird initialisiert. Ich empfehle dringend, replace auf innerHTML, vor allem auf <body> zu laufen.

Quelle

2017-07-23 01:28:56

Der Aufruf von document.body.innerHTML und die rechte Zuordnung, die danach kommt vollständig ist die HTML im Dokument zu ersetzen, oder genauer gesagt, der Parser eine völlig neue Knotenstruktur im Innern der body so alle Ihrer HTMLElement Knoten baut das kann Zuvor waren ihnen Event-Listener zugewiesen, die nicht mehr vorhanden sind. Ich empfehle Ihnen, einen anderen Weg zu gehen, als nur den HTML-Code zu ersetzen, der zu Ihrem Regex passt, anstatt den gesamten HTML-Inhalt des body-Elements. Oder Sie könnten eine Funktion haben, die innerhalb des ersten Ereignis-Listener-Callback aufgerufen wird, der nach dem Ersetzen des Body-HTML ausgelöst wird, der die Ereignis-Listener neu initialisiert.

Quelle

2017-07-23 01:35:33

Event-Handler stecken nach dem Ändern body.innerHTML

Antwort

Verwandte Themen