2009-12-14 13 views
10

Ich habe einen Code, der auf Klick-Aktion beim Laden der Seite binden, es ist ein Link. Wenn ich darauf klicke, sende ich eine Ajax-Anfrage und ersetze den Inhalt in einem div mit der Funktion jquery append(). Dieser neue Inhalt hat Links und ich muss etwas Aktion für sie binden, aber ich konnte nicht .. bind did't work ich denke, weil jquery append DOM Baum nicht aktualisiert. Wie könnte ich eine späte Bindung bekommen?jquery späte Bindung

Antwort

11

Späte Bindung ist jetzt verfügbar von jQuery Live() Ereignis verwendet:

$('a.my-links-class').live('click', function() { 
    // do your link action here 
}); 
+0

Das machte gerade meinen Tag. live() ist unglaublich! – AnApprentice

+8

Sie sollten 'on()' anstelle von 'live()' verwenden. – Broxzier

2

Sie müssen die live-Funktion von jQuery verwenden, die ein Ereignis an alle Elemente bindet, die einem Selektor entsprechen, unabhängig davon, wann sie erstellt wurden.

2

Sie jQuery 1.3 + 's $().live(event, function) Funktion nutzen zu können. $("a").live("click", myClickFunc) wird myClickFunc wie $("a").click(myClickFunc) oder $("a").bind("click", myClickFunc) binden, aber die Ereignisse werden "live" gebunden, so dass Elemente, die dem DOM nach diesem Funktionsaufruf hinzugefügt werden, ebenfalls gebunden werden. Sie können Live-gebundene Ereignisse mit $().die() entfernen. Weitere Informationen zu $ ​​(). Live, siehe the documentation for it.

Eine andere Möglichkeit wäre, eine Funktion zu haben, die Elemente gegeben einen bestimmten Kontext zu binden (mit dem $ Auswahlfunktion ist selten verwendete zweiter Parameter):

function myBindEvents(context) { 
    $("a", context).click(myClickFunc); 
} 

und rufen, dass, wenn Sie ein Element aktualisieren mit AJAX :

$("<div>").load("...", "...", function(){myBindEvents(this);}); 

Hoffe das hilft. :)

5

die .live() war veraltet von verions 1.9 bis.

Für alle, die eine spätere Version von Jquery verwenden, können sie das Ereignis .on() verwenden, das funktioniert auf die gleiche Art und Weise.

14

Es gibt drei Funktionen, die dies tun können:

  • $(selector).live(events, data, handler); - jQuery 1.3+ - Version veraltet: 1,7, entfernt: 1,9 (reference)
  • $(document).delegate(selector, events, data, handler); - jQuery 1.4.3+ - Ab jQuery 1.7 wurde .delegate() durch die Methode .on() ersetzt. (reference)
  • $(document).on(events, selector, data, handler); - jQuery 1.7+ - bevorzugt (reference)

Es ist im Allgemeinen verwenden on() adviced und seine Verwendung einfach ist und wahrscheinlich bevorzugt Weg.

  1. Der erste Selektor muss beim Aufruf der Funktion vorhanden sein und darf nicht gelöscht werden oder das Ereignis wird ebenfalls gelöscht (dies kann document sein).
  2. Der erste Parameter ist das Ereignis (z.B."click")
  3. Der zweite Parameter ist der Selektor, an den das Ereignis gebunden werden soll.
  4. Dann können Sie schließlich einige benutzerdefinierte Daten und eine Funktion zum Ereignis hinzufügen.

Hier ist ein Beispielcode:

// Make sure the DOM is ready 
$(function() { 
    // Bind the click event to the function 
    $(document).on("click", "a.class", function(event) { 
     // Put your code here. 
    }); 
}); 
+0

Brilliant! Ich frage mich, warum das nicht funktioniert: $ (function() { $ ('. Klasse'). On ("click", "a", Funktion (Ereignis)) { // Setzen Sie Ihren Code hier. }); }); – Narayana

+0

Sie suchen ein 'a' Element in einem anderen Element mit der Klasse' class'? – Broxzier

+0

Ja ... Ich dachte, '$ ('. Class1')' wird alle Elemente mit einer Klasse von 'class1' auswählen, das' "a" 'wird die Anker-Tags daraus auswählen und den Event-Handler binden. Nein? – Narayana

4

Methode .live in JQuery 1.9 ist deprecated.So jetzt u wie dies tun können:

$("body").on("click", ".classname", function() { ... }) 
Verwandte Themen