it-swarm.com.de

Ereignishandler funktioniert nicht bei dynamischen Inhalten

Ich habe ein Tag A, in dem beim Klicken ein weiteres Tag B angehängt wird, um beim Klicken eine Aktion B auszuführen. Wenn ich also auf Tag B klicke, wird Aktion B ausgeführt. Die Methode .on Scheint jedoch nicht mit dem dynamisch erstellten Tag B zu funktionieren.

Mein HTML und JQuery für Tag A ist wie folgt:

<a id="address" class="add_address btn btn-inverse btn-medium pull-right Push-top">Add Shipping address</a>

$('.add_address').click(function(){
    //Add another <a>
    $(document).append('<a id="address"  class="pull-right update btn btn-inverse btn-medium Push-top">Update</a>');
})

Wenn Sie auf Tag B klicken, wird eine Aktion B ausgeführt. Meine jquery ist wie folgt:

$('.update').on('click',function(){
  //action B
});

Ich habe einige nicht dynamische Inhalte mit der Klasse ".update". In der .on() -Methode funktioniert dies problemlos für den nicht dynamischen Inhalt, jedoch nicht für den dynamischen Inhalt.

Wie kann ich es für dynamischen Inhalt arbeiten lassen?

243
edelweiss

Sie müssen den Selector-Parameter hinzufügen, andernfalls wird das Ereignis direkt gebunden und nicht delegiert. Dies funktioniert nur, wenn das Element bereits vorhanden ist (daher funktioniert es nicht für dynamisch geladene Inhalte).

Siehe http://api.jquery.com/on/#direct-and-delegated-events

Ändern Sie Ihren Code in

$(document.body).on('click', '.update' ,function(){

Die jQuery-Menge empfängt das Ereignis und delegiert es an Elemente, die dem als Argument angegebenen Selektor entsprechen. Dies bedeutet, dass im Gegensatz zur Verwendung von live die Elemente der jQuery-Menge vorhanden sein müssen, wenn Sie den Code ausführen.

Da diese Antwort viel Beachtung findet, sind hier zwei ergänzende Hinweise:

1) Versuchen Sie nach Möglichkeit, den Ereignis-Listener an das genaueste Element zu binden, um eine unnötige Ereignisbehandlung zu vermeiden.

Wenn Sie also ein Element der Klasse b zu einem vorhandenen Element der ID a hinzufügen, verwenden Sie nicht

$(document.body).on('click', '#a .b', function(){

aber benutze

$('#a').on('click', '.b', function(){

2) Achten Sie beim Hinzufügen eines Elements mit einer ID darauf, dass Sie es nicht zweimal hinzufügen. In HTML ist es nicht nur "illegal", zwei Elemente mit derselben ID zu haben, sondern es bringt auch viele Dinge zum Erliegen. Zum Beispiel ein Selektor "#c" würde nur ein Element mit dieser ID abrufen.

547
Denys Séguret

Sie vermissen den Selektor in der .on Funktion:

.on(eventType, selector, function)

Dieser Selektor ist sehr wichtig!

http://api.jquery.com/on/

Wenn neues HTML in die Seite eingefügt wird, wählen Sie die Elemente aus und fügen Sie Ereignishandler hinzu, nachdem das neue HTML in die Seite eingefügt wurde. Oder verwenden Sie delegierte Ereignisse , um einen Ereignishandler anzuhängen

Siehe jQuery 1.9 .live () ist keine Funktion für weitere Einzelheiten.

26
Samuel Liew