So implementieren Sie dynamisches Laden und wiederholte Bindung in JS

Dieses Mal zeige ich Ihnen, wie Sie dynamisches Laden und wiederholte Bindung in JS implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung von dynamischem Laden und wiederholter Bindung in JS? .

Vorwort

Beim Hinzufügen eines Datenelements wurde dynamisches Laden verwendet, um es auf der Benutzeroberfläche anzuzeigen. Später wurde ein schwerwiegender Fehler entdeckt . Nehmen Sie dieses Ding, das ich gemacht habe, als Beispiel: Wenn ich ein Datenelement hinzufüge und dann auf Löschen klicke, werde ich gefragt, ob ich es löschen soll, wie unten gezeigt:

Aber wenn ich zwei hinzufüge Wenn mehr als ein Datenelement gelöscht wird, werden Sie 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:

Wie kann man den DOM-Dokumentenbaum durchqueren?

React ermöglicht die Synchronisierung von Mobiltelefondaten und Anzeige in der Schnittstellenfunktion

Das obige ist der detaillierte Inhalt vonSo implementieren Sie dynamisches Laden und wiederholte Bindung in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!