jQuery .live () vs .on () Methode zum Hinzufügen eines Klickereignisses nach dem Laden von dynamischem HTML

Ich verwende jQuery v.1.7.1, wo die .live () -Methode anscheinend veraltet ist.

Das Problem, das ich habe, ist, dass beim dynamischen Laden von HTML in ein Element mit:

$('#parent').load("http://..."); 

Wenn ich danach versuche, ein Klickereignis hinzuzufügen, wird das Ereignis mit keiner der folgenden Methoden registriert:

$('#parent').click(function() ...); 

oder

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

Was ist der richtige Weg, um diese Funktionalität zu erreichen? Es scheint nur mit .live () für mich zu funktionieren, aber ich sollte diese Methode nicht verwenden. Beachten Sie, dass #child ein dynamisch geladenes Element ist.

Vielen Dank.

Wenn der Click-Handler für ein Element funktionieren soll, das dynamisch geladen wird, legen Sie den Event-Handler für ein übergeordnetes Objekt fest (das nicht dynamisch geladen wird) und geben ihm einen Selektor, der Ihrem dynamischen Objekt wie folgt entspricht:

$('#parent').on("click", "#child", function() {});

Der Ereignishandler wird an das #parentObjekt angehängt, und jedes Mal, wenn ein Klickereignis auf das Objekt sprudelt, das seinen Ursprung hat #child, wird Ihr Klickhandler ausgelöst. Dies wird als delegierte Ereignisbehandlung bezeichnet (die Ereignisbehandlung wird an ein übergeordnetes Objekt delegiert).

Dies geschieht auf diese Weise, da Sie das Ereignis an das #parentObjekt anhängen können, auch wenn das #childObjekt noch nicht vorhanden ist. Wenn es jedoch später vorhanden ist und angeklickt wird, sprudelt das Klickereignis zum #parentObjekt und zeigt an, dass es von #childund stammt Es gibt einen Ereignishandler zum Klicken #childund Auslösen Ihres Ereignisses.

Versuche dies:

$('#parent').on('click', '#child', function() {
    // Code
});

Aus der $.on()Dokumentation:

Ereignishandler sind nur an die aktuell ausgewählten Elemente gebunden. Sie müssen zum Zeitpunkt des Aufrufs Ihres Codes auf der Seite vorhanden sein .on().

Ihr #childElement existiert nicht, wenn Sie es aufrufen $.on(), daher ist das Ereignis nicht gebunden (im Gegensatz zu $.live()). #parentJedoch tut exist, so verbindlich das Ereignis , dass in Ordnung ist.

Das zweite Argument in meinem obigen Code fungiert als 'Filter', der nur ausgelöst wird, wenn das Ereignis bis #parentvon sprudelt #child.

$(document).on('click', '.selector', function() { /* do stuff */ });

EDIT: Ich gebe ein bisschen mehr Informationen darüber, wie das funktioniert, weil ... Worte. In diesem Beispiel platzieren Sie einen Listener für das gesamte Dokument.

Wenn Sie clickmit einem oder mehreren Elementen übereinstimmen .selector, sprudelt das Ereignis bis zum Hauptdokument - solange es keine anderen Listener gibt, die die event.stopPropagation()Methode aufrufen -, wodurch das Sprudeln eines Ereignisses zu übergeordneten Elementen übertroffen wird.

Anstatt an ein bestimmtes Element oder eine bestimmte Gruppe von Elementen zu binden, warten Sie auf Ereignisse, die von Elementen stammen, die dem angegebenen Selektor entsprechen. Dies bedeutet, dass Sie einmal einen Listener erstellen können, der automatisch den aktuell vorhandenen Elementen sowie allen dynamisch hinzugefügten Elementen entspricht.

Dies ist aus mehreren Gründen sinnvoll, einschließlich Leistung und Speichernutzung (in großen Anwendungen).

BEARBEITEN:

Offensichtlich ist das nächstgelegene übergeordnete Element, das Sie abhören können, besser, und Sie können jedes Element anstelle von verwenden document, solange sich die untergeordneten Elemente, auf die Sie Ereignisse überwachen möchten, in diesem übergeordneten Element befinden ... aber das hat wirklich nichts zu tun mit der Frage.

Das Äquivalent von .live () in 1.7 sieht folgendermaßen aus:

$(document).on('click', '#child', function() ...); 

Beobachten Sie das Dokument grundsätzlich auf Klickereignisse und filtern Sie sie nach #child.

Ich weiß, dass es etwas spät für eine Antwort ist, aber ich habe eine Polyfüllung für die .live () -Methode erstellt. Ich habe es in jQuery 1.11 getestet und es scheint ziemlich gut zu funktionieren. Ich weiß, dass wir die .on () -Methode wo immer möglich implementieren sollen, aber in großen Projekten, in denen es nicht möglich ist, alle .live () -Aufrufe aus irgendeinem Grund in die entsprechenden .on () -Aufrufe zu konvertieren, kann dies folgendermaßen sein Arbeit:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Fügen Sie es einfach hinzu, nachdem Sie jQuery geladen haben und bevor Sie live () aufrufen.

.on () ist für jQuery Version 1.7 und höher. Wenn Sie eine ältere Version haben, verwenden Sie diese:

$("#SomeId").live("click",function(){
    //do stuff;
});

Ich habe in meinem Projekt "live" verwendet, aber einer meiner Freunde schlug vor, "on" anstelle von "live" zu verwenden. Und als ich versuchte, das zu nutzen, hatte ich ein Problem wie Sie.

Auf meinen Seiten erstelle ich dynamisch Schaltflächen-Tabellenzeilen und viele Dom-Sachen. aber wenn ich die Magie benutze, verschwand sie.

Die anderen Lösungen wie "Verwenden Sie es wie ein Kind" rufen Ihre Funktionen jedes Mal bei jedem Klick auf. Aber ich finde einen Weg, es wieder möglich zu machen und hier ist die Lösung.

Schreiben Sie Ihren Code als:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Anrufer anrufen (); nachdem Sie Ihr Objekt auf der Seite wie folgt erstellt haben.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

Auf diese Weise wird Ihre Funktion aufgerufen, wenn nicht jeder Klick auf die Seite erfolgen soll.