jQuery bekommen Element-ID nicht aus dynamisch geladenen Datei

Question

Ich habe diesen Code, der eine angeklickt div id bekommt:

$(document).ready(function(){ 
    $(".playitem").click(function(){ 
     pos = this.id; 
     alert(pos); 
    }); 
}); 

Und das ist HTML-Code:

<div class="playitem" id="item-123456"> 
code here... 
</div> 

Dies ist, wie Dokument dynamisch geladen :

Alles funktioniert, während dieser HTML-Code in der aktuellen HTML-Datei ist. Wenn ich jedoch ein externes HTML-Dokument mit demselben HTML-Code dynamisch lade und dasselbe div, funktioniert diese jQuery-Funktion nicht mehr.

Irgendwelche Ratschläge? Vielen Dank im Voraus!

Answer 1

Das liegt daran, dass die DOM-Elemente für die neue Datei zu dem Zeitpunkt noch nicht verfügbar sind, an dem Sie einen Click-Ereignishandler an sie binden. Wenn es keine Elemente in der Auswahl jQuery sind ...

$(".playitem").length === 0 

Und Sie gehen, um einen Click-Ereignishandler diese Elemente zu binden, wird jQuery nicht Fehler aus, es wird nicht nur die Click-Ereignishandler binden etwas.

Versuchen Sie es mit der Live-Methode. Dadurch wird der Click-Ereignishandler an alle aktuellen und zukünftigen DOM-Elemente gebunden, die mit dem Selektor übereinstimmen.

Alternativ können Sie die neuen DOM-Elemente laden und die Click-Methode erneut binden, nachdem diese DOM-Elemente geladen wurden.

Hinweis: Sie können die Live Methode mit allen anderen Event-Handler als auch verwenden können (Mouseover, keypress, etc.)

Answer 2

Verwenden Sie die live Funktion.

$(document).ready(function(){ 
    $(".playitem").live("click", function(){ 
     pos = this.id; 
     alert(pos); 
    }); 
}); 

Answer 3

Versuchen FireBug oder die IEDeveloperToolbar mit dem HTML zu analysieren, die der Browser nach dem Last tatsächlich verwenden ist? Es kann sein, dass die Ergebnisse anders sind, als Sie es erwarten.

Sie müssen auch die Reihenfolge der Ereignisse untersuchen. Wenn die Ladeoperation nach der document.ready-Funktion erfolgt, wird Ihr Klickereignis nicht angehängt, da das Element noch nicht vorhanden ist.

Answer 4

Sie müssen die jquery-Funktion für onload binden, wenn Sie sie in diese Datei einfügen möchten.

Es versucht derzeit, es zu implementieren, bevor es existiert, also müssen Sie es aufrufen, wenn es erstellt wird.

Answer 5

Wie Sneakyness gesagt hat, wird es besser sein, den Code in die Datei zu stellen, da die Live-Methode den Browser verlangsamt.

Answer 6

Nur un Update auf diese alte Frage ... Als live ist seit jQuery veraltet 1.7 Sie besser on mit delegate Veranstaltungen nutzen.

$ (selector) .live (Ereignisse, Daten, Handler); // jQuery 1.3+

$ (document) .delegate (Selektor, Ereignisse, Daten, handler); // jQuery 1.4.3+

$ (document) .auf (Veranstaltungen, Selektor, Daten, handler); // jQuery 1.7+

Statt

$(".playitem").live('click', function(){ 
    pos = this.id; 
    alert(pos); 
}); 

Mit dieser

$("body").on('click', '.playitem', function(){ 
    pos = this.id; 
    alert(pos); 
});