Für eine Ajax-Webanwendung mit vielen Bildschirmen und Navigationen, zum Anhängen von Ereignishandlern für div oder Links oder Schaltflächen können wir wie folgt codieren:

//Using $.on inside Ajax success handler

$("#container").on("click", "#selector", function(event){

});

Dieser Ansatz funktioniert NICHT, wenn der Container im DOM nicht vorhanden ist. Damit es funktioniert, muss Dokument oder Body als Container verwendet werden, die Leistung ist möglicherweise nicht gut.

Der Ajax Success Handler kann viele Codezeilen enthalten. Um die Organisation zu verbessern, können Sie den Code in eine Funktion verschieben und diese Funktion im Ajax-Erfolgshandler aufrufen. Es müssen jedoch viele Registerereignisfunktionen für alle Permutationen und Kombinationen erstellt werden.

Registerfunktionen Code-Unordnung.

Wenn der Ereignishandler bereits registriert wurde, führt eine erneute Registrierung zu zwei geraden Handlern. Also müssen wir uns abmelden und registrieren (ODER nur anhängen, wenn noch nicht anbei) - Nicht sicher, ob es ein Leistungsproblem gibt.

Irgendwelche Alternativen?

Ich denke über folgendes nach:

Verwalten Sie für ein Modul an einer Stelle eine Zuordnung von Container-, Ziel- und Klickereignishandler.

Wenn xhr.responseHTML im globalen Ereignishandler ajaxComplete über den Container verfügt, hängen Sie den Ereignishandler an die Zielelemente an (fügen Sie ihn nur an, wenn er noch nicht angehängt ist).

$(document).ajaxComplete(function(e, xhr, settings){
   for(ind in clickEventListeners){eventlistner = clickEventListeners[ind];
    if($(eventlistner.container,xhr.responseHTML).length > 0){
      $(eventlistner.target).on("click",function(){
      eventlistner.processor(this);
      });
  }
 }
});

Vorteile: Alle Event-Handler, die für ein Modul an einer Stelle dokumentiert sind. Kein Code-Durcheinander für jeden Ajax-Erfolgs-Handler.

Nachteile: Ich bin mir nicht sicher, ob es welche gibt.

Bitte teilen Sie uns eventuelle Vorschläge mit.