Mehrfache Ereignisbindung auf dynamisch hinzugefügte Elemente

Question

Ich habe den folgenden Javascript jquery ajax Aufruf, der innerhalb einer for Schleife ist.

Diese Schleife ruft eine externe API auf und hängt eine Eingabeschaltfläche an ein HTML-Element an. Wenn diese Schaltfläche gedrückt wird, sollte ein Popup-Warnfeld angezeigt werden, das jedoch mehrere Male eingeblendet wird, wenn die for-Schleife dieses Klickereignis mehrmals an die Schaltfläche anfügt.

Ich habe auch versucht, die .click() außerhalb der for-Schleife, aber das scheint nicht zu arbeiten, weder wie der Ajax ist ein asynchron und das Ereignis .click() wird nicht an etwas seit seiner Außenseite angeschlossen der Strömung.

Ich habe versucht, dieses Problem zu googeln, aber die meisten Leute haben nur regelmäßige asynchrone Ajax-Probleme, aber dieses Mal ist es in einer Schleife und es scheint nicht viel Informationen über dieses Setup zu sein.

• Wie würde man diesen Code reparieren oder verbessern? Ich bin mir sicher, es ist nicht das effizienteste Setup.
• Muss ich eine Rückruffunktion verwenden?

-Code

function successHandler(data, textStatus, jqXHR) {   
    jj = '<input class ="submitAsset"type="submit" value="'+ data 
+'">'; 
    jQuery("#example").append(jj); 

    jQuery('.submitAsset').on("click", function() {      
    alert("clicked"); 
    }); //function click 
} //function successHandler           
for (i=0;i < 9; i++) { 
    $.ajax({ 
     dataType: 'json', 
     url: 'http://example.com', 
     success: successHandler 
    });//ajax call-- get required information 

}//for 

Answer 1

Der Grund ist es mehrere Warnungen wirft, weil gleiche Klick-Handler-Element angebracht ist, jedes Mal successhandler genannt.

Sie müssen entweder die Verwendung Ereignis Delegation oder das Ereignis im Erfolgsereignis neu angehängtes Element nur anschließen:

1) Unter Verwendung Ereignis Delegation:

function successHandler(data, textStatus, jqXHR) { 
jj = '<input class ="submitAsset"type="submit" value="'+ data +'">'; 
jQuery("#example").append(jj);  
} 
jQuery('#example').on("click",".submitAsset", function() {      
    alert("clicked"); 
}); 

2) Durch das Hinzufügen Click-Handler angefügt zum letzten Element:

Hinweis: Ich würde empfehlen, Ereignisdelegierung in diesem Fall verwenden, da es weniger CPU-Aufwand im Vergleich zu mehreren Bindungen erstellt.

Answer 2

Sie müssen keine Ereignisse in Schleife befestigen und befestigen Ereignisse Ereignis Delegation mit

function successHandler(data, textStatus, jqXHR) {   
     jj = '<input class ="submitAsset"type="submit" value="'+ data +'">'; 
     jQuery("#example").append(jj); 
    } //function successHandler           

    for (i=0;i < 9; i++) 
    { 
     $.ajax({ 
      dataType: 'json', 
      url: 'http://example.com', 
      success: successHandler 
     });//ajax call-- get required information 

    }//for 

    //and attache events using event delegation 
    $("#example").on("click", "input.submitAsset", function() 
    {      
     alert("clicked"); 
    }); 

Answer 3

Die successHandler wird mehrmals und die Event-Handler werden mehrmals mit den Klassennamen registrieren aufgerufen werden. So werden alle bereits erstellten Elemente mehrfach registriert.

Um dies zu beheben, anstatt den Handler mit jQuery('.submitAsset') Registrierung, erstellen Sie das Element jj nach wie unten,

function successHandler(data, textStatus, jqXHR) {   
    jj = jQuery('<input class ="submitAsset"type="submit" value="'+ data 
+'">'); 
    jQuery("#example").append(jj); 

    jj.on("click", function() {      
    alert("clicked"); 
    }); //function click 
} //function successHandler           
for (i=0;i < 9; i++) { 
    $.ajax({ 
     dataType: 'json', 
     url: 'http://example.com', 
     success: successHandler 
    });//ajax call-- get required information 

} 

Andernfalls fügen Sie die event außerhalb des jQuery und registrieren die onclick Hander direkt an das Element Einwickeln wie unten Erfolg Handler,

$("#example").on("click", ".submitAsset", function() 
    {      
     alert("clicked"); 
    }); 

function successHandler(data, textStatus, jqXHR) {   
     jj = '<input class ="submitAsset"type="submit" value="'+ data 
    +'">'; 
     jQuery("#example").append(jj); 


    } //function successHandler           
    for (i=0;i < 9; i++) { 
     $.ajax({ 
      dataType: 'json', 
      url: 'http://example.com', 
      success: successHandler 
     });//ajax call-- get required information 

    } 

Answer 4

Wenn tou Form haben, dann kann ich nicht denken Sie über mehrere hinzufügen müssen Submit buttons stattdessen einfach hinzufügen Button Geben Sie andernfalls return false oder event.preventDefault() ein.Also schlage ich vor, button Typ zu verwenden und Ereignisdelegation wie zu verwenden,