Heim Web-Frontend js-Tutorial 关于innerHTML后丢失动态绑定的EVENT问题解决方法_javascript技巧

关于innerHTML后丢失动态绑定的EVENT问题解决方法_javascript技巧

May 16, 2016 pm 05:33 PM
event 动态绑定

用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如:
html:

复制代码 代码如下:

点击


script:
复制代码 代码如下:

document.getElementById('d1').onclick=function(){alert(1)};
var html=document.body.innerHTML;
document.body.innerHTML=html;

这段代码执行后点击d1是没有任何反应的。
解决方法
把onclick绑定到父元素,利用冒泡原理,判断当前元素是否为d1,若为d1则执行
复制代码 代码如下:

document.body.onclick=function(e){
var e=e||event;
var current=e.target||e.srcElement
if(current.id=='d1'){alert(1)}
}

这也是折中的方法,肯定会影响效率的。
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So binden und aktualisieren Sie Formulardaten dynamisch in Vue So binden und aktualisieren Sie Formulardaten dynamisch in Vue Oct 15, 2023 pm 02:24 PM

So binden und aktualisieren Sie Formulardaten dynamisch in Vue. Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklung sind Formulare ein interaktives Element, das wir häufig verwenden. In Vue ist die dynamische Bindung und Aktualisierung von Formularen eine häufige Anforderung. In diesem Artikel wird erläutert, wie Formulardaten in Vue dynamisch gebunden und aktualisiert werden, und es werden spezifische Codebeispiele bereitgestellt. 1. Dynamische Bindung von Formulardaten Vue stellt die V-Modell-Anweisung zur Implementierung einer bidirektionalen Bindung von Formulardaten bereit. Durch die V-Model-Direktive können wir den Wert des Formularelements mit der Vue-Instanz vergleichen

Ereignisverarbeitungsbibliothek in PHP8.0: Ereignis Ereignisverarbeitungsbibliothek in PHP8.0: Ereignis May 14, 2023 pm 05:40 PM

Ereignisverarbeitungsbibliothek in PHP8.0: Ereignis Mit der kontinuierlichen Entwicklung des Internets wird PHP als beliebte Back-End-Programmiersprache häufig bei der Entwicklung verschiedener Webanwendungen verwendet. In diesem Prozess ist der ereignisgesteuerte Mechanismus zu einem sehr wichtigen Teil geworden. Die Ereignisverarbeitungsbibliothek Event in PHP8.0 bietet uns eine effizientere und flexiblere Ereignisverarbeitungsmethode. Was ist Event-Handling? Event-Handling ist ein sehr wichtiges Konzept bei der Entwicklung von Webanwendungen. Ereignisse können jede Art von Benutzerzeile sein

Steam Summer Sale – Valve verspricht 95 % Rabatt auf AAA-Spiele und bestätigt Rabatte für die viralen Spiele Palworld und Content Warning Steam Summer Sale – Valve verspricht 95 % Rabatt auf AAA-Spiele und bestätigt Rabatte für die viralen Spiele Palworld und Content Warning Jun 26, 2024 pm 03:40 PM

Beim Summer Sale von Steam gab es bereits einige der besten Spiele-Rabatte, und dieses Jahr scheint es für Valve ein weiteres Homerun-Angebot zu geben. Ein Trailer (siehe unten), der einige der im Steam Summer Sale reduzierten Spiele vorstellt, wurde gerade veröffentlicht

So verwenden Sie das Event-Ereignismodul von Pygame in Python So verwenden Sie das Event-Ereignismodul von Pygame in Python May 18, 2023 am 11:58 AM

Das Event-Modul von Pygame ist eines der wichtigen Module von Pygame. Es ist der Kern für die Erstellung des gesamten Spielprogramms, z. B. häufig verwendete Mausklicks, Tastaturtipps, Spielfensterbewegung, Fenstergrößenänderung, Auslösen bestimmter Plots und Beenden . Spiele usw., diese können als „Ereignisse“ angesehen werden. Der Ereignistyp Pygame definiert eine Struktur, die speziell zum Verarbeiten von Ereignissen verwendet wird, nämlich die Ereigniswarteschlange. Diese Struktur folgt dem Grundprinzip „Wer zuerst kommt, mahlt zuerst“. Über die Ereigniswarteschlange können wir Benutzervorgänge in einer geordneten Reihenfolge verarbeiten -nach-eins (Trigger-Ereignis). Die folgende Tabelle listet die häufig verwendeten Spielereignisse in Pygame auf: Name Beschreibung QUIT Der Benutzer drückt die Schaltfläche zum Schließen des Fensters ATIVEEVENTPy

Steam Summer Sale-Trailer kündigt 95 % Rabatt auf AAA-Spieleangebote an und bestätigt Preissenkungen für Palworld, Stellaris und Content Warning Steam Summer Sale-Trailer kündigt 95 % Rabatt auf AAA-Spieleangebote an und bestätigt Preissenkungen für Palworld, Stellaris und Content Warning Jun 26, 2024 am 06:30 AM

Beim Summer Sale von Steam gab es bereits einige der besten Spiele-Rabatte, und dieses Jahr scheint es für Valve ein weiteres Homerun-Angebot zu geben. Ein Trailer (siehe unten), der einige der im Steam Summer Sale reduzierten Spiele vorstellt, wurde gerade veröffentlicht

Statische Bindung und dynamische Bindung in Java Statische Bindung und dynamische Bindung in Java Aug 19, 2023 pm 02:57 PM

Ja! Wenn der Compiler das Objekt kennt, das für die Methodenausführung verwendet werden soll, kann er die Referenz statisch an das Objekt binden. Statische Variablen, private Variablen und endgültige Variablen verwenden beispielsweise eine statische Bindung. Wenn zur Laufzeit eine Objekterkennung erforderlich ist, verwenden Sie dynamische Bindung. Das Überschreiben von Methoden ist ein Fall der dynamischen Bindung. Bei der Methodenüberladung handelt es sich um eine statische Bindung.

Um welches Ereignis handelt es sich in JavaScript, wenn die Größe des Browserfensters geändert wird? Um welches Ereignis handelt es sich in JavaScript, wenn die Größe des Browserfensters geändert wird? Sep 05, 2023 am 11:25 AM

Verwenden Sie die Ereignisse window.outerWidth und window.outerHeight, um die Fenstergröße in JavaScript abzurufen, wenn die Größe des Browsers geändert wird. Beispiel: Sie können versuchen, den folgenden Code auszuführen, um die Größe des Browserfensters mithilfe von Ereignissen zu überprüfen: <!DOCTYPEhtml><html>

Tipps zur Verwendung von v-bind zur Implementierung dynamischer Bindung in Vue Tipps zur Verwendung von v-bind zur Implementierung dynamischer Bindung in Vue Jun 25, 2023 am 11:02 AM

Vue ist ein Front-End-Framework, mit dem wir dynamische Webanwendungen bequemer entwickeln können. Unter diesen ist v-bind eine sehr leistungsstarke Anweisung in Vue, mit der wir Attribute, Klassen, Stile usw. dynamisch an HTML binden können. In diesem Artikel werden einige Tipps zur Verwendung von v-bind zur Implementierung der dynamischen Bindung in Vue gegeben, in der Hoffnung, den Lesern dabei zu helfen, Vue besser zu nutzen. 1. Bindung von Attributwerten Die grundlegendste Verwendung von v-bind besteht darin, HTML dynamisch zu binden

See all articles