JS dynamisches Laden wiederholter Bindung

Dieses Mal werde ich Ihnen das dynamische Laden und die wiederholte Bindung von JS vorstellen. Was sind die Vorsichtsmaßnahmen für das dynamische Laden und die wiederholte Bindung von JS? Das Folgende ist ein praktischer Fall.

Vorwort

Beim Hinzufügen eines Datenelements wurde das dynamische Laden verwendet, um es auf der Benutzeroberfläche anzuzeigen. Beachten Sie diese Notiz, die ich gemacht habe Als Beispiel: Wenn ich nach dem Hinzufügen eines Datenelements auf

Löschen klicke, werde ich wie unten gezeigt gefragt, ob ich es löschen möchte:

Aber wenn ich mehr als zwei Datenelemente hinzufüge, werden Sie nach dem Löschen des Elements mehrmals aufgefordert, den Löschvorgang zu bestätigen.

Nach der Untersuchung haben wir endlich das Problem gefunden.

Text

Wenn Inhalte dynamisch hinzugefügt werden, werden normalerweise die Ereignisse geschrieben, die im hinzugefügten p verwendet werden müssen, z. B. Klickereignisse / Chang-Events usw. Nehmen Sie als Beispiel mein Löschereignis. Da das Löschereignis unter dem Ereignis des Hinzufügens einer Notiz geschrieben werden muss, wird es beim Hinzufügen des ersten Datenelements einmal gebunden, und beim Hinzufügen des zweiten Datenelements wird es einmal gebunden , und wenn das n-te Datenelement hinzugefügt wird, wird es einmal gebunden. Es wurden n-fache Löschereignisse gebunden. Wenn Sie also das n-te Datenelement löschen, werden Sie n-mal aufgefordert, den Löschvorgang zu bestätigen.

Da nun die Fehlerursache gefunden wurde, kann sie behoben werden. Bevor Sie das Löschereignis binden, lösen Sie einfach die Bindung des letzten gebundenen Ereignisses.

Code:

//解绑
$(".deletebtn").off("click");
$(".update").off("change");
//绑定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine detaillierte Erklärung der Schritte zum Aufrufen untergeordneter Komponenten aus Angular-Elternkomponenten

Anleitung für Vue-Neulinge

Das obige ist der detaillierte Inhalt vonJS dynamisches Laden wiederholter Bindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!