jquery events funktioniert nicht für Elemente angehängt

Habe ich diese Website hier

Wie Sie sehen können gibt es ein winziges Bild Schieberegler für "Bilder" und "Web Templates" Registerkarten, wo die Bilder rutschen von rechts nach Links, verschwindet dann und es erscheint dann ganz am Ende des übergeordneten Elements (eine <tr> in meinem Fall).

Wenn Sie den Mauszeiger über die kleinen Bilder können Sie sehen, es ist die Vorschau auf der linken Seite.

So weit So gut.

Aber wenn Sie warten, bis die ersten Bilder, geht wieder das hover-Ereignis funktioniert nicht mehr.

Ist es möglich, dass jquery nicht sehen kann, dass neue Elemente angehängt am Ende der <tr> tag?

Bitte poste den relevanten code hier ein und machen Sie nicht uns besuchen Sie eine andere Website und waten durch die Quelle. Noch besser, poste ein Beispiel jsfiddle.net.
Dieser FAQ-Abschnitt und den Abschnitt, bevor es beinhaltet die Antwort auf diese Frage. docs.jquery.com/...

InformationsquelleAutor boyd | 2012-06-01

12

So, wie Sie sind verbindlich, Ihre Termine werden nicht die Arbeit für dynamisch hinzugefügte Elemente. In preview_script.js Sie haben:
```
$(".box_body img").hover(function(){
```
Wird dieser Event-Handler hinzufügen, um alle img-tags mit der Klasse "box_body", aber diejenigen, die angehängt werden später NICHT bekommen wird das event.

Versuchen Sie dies:
```
$(document).on("hover", ".box_body img", function() {..});
```
Dadurch wird das Ereignis zu dokumentieren, und nur Feuer, wenn die eventtarget ist img mit class = "box_body". Denn die Ereignisse propagieren, diese sollten funktionieren, solange nichts dazwischen Stoppt, bevor es erreicht Dokument (durch Aufruf von "event.stopPropagation()")

Wenn Sie wissen, das ÜBERGEORDNETE Element von ".box_body img", die Sie ersetzen können-Dokument mit, dass dies funktioniert ein wenig besser, wie Sie brauchen nicht zu warten, für die Veranstaltung zu verbreiten up zu dokumentieren.

Beachten Sie, dass Sie können das gleiche erreichen, Verwendung von Delegierten (falls nicht vorhanden):
```
$(document).delegate(".box_body img", "hover", function() {..});
```
- ich danke Ihnen für Ihre gemeinsame Zeit.die .delegieren funktioniert perfekt
InformationsquelleAutor Porco
2

Sie verwenden möchten .live () - Funktion von jQuery, um zu befestigen, event-Handler, um Elemente, die erstellt wird, in der Zukunft. Hier ist der doc: http://api.jquery.com/live/
hier ist Verwendung:
```
$(".dynamicButtons").live("hover", function() {
    //do stuffs
});
```
- oh mein, ich habe noch nicht einmal die doc-in ein während - sieht aus wie Sie es geändert .auf()
- Das Ding funktioniert Super.Danke!!!
- $.live abgeschrieben jetzt, versuchen Sie es mit $.on statt.
InformationsquelleAutor solidau
2

In Ihrem script.js ändern Datei hier http://web-art.netau.net/script.js
```
$(".box_body img").hover(function(){
            var src=$(this).attr("src");
            var target=$(this).parents("table").attr("id").split("_").pop();
            $("#preview_"+target).attr({src:src});
})
```
Linie 112 bis 116 die folgenden
```
$(document).on('mouseenter',".box_body img",function(){
        var src=$(this).attr("src");
        var target=$(this).parents("table").attr("id").split("_").pop();
        $("#preview_"+target).attr({src:src});
});
```
Der Grund dafür wurde schon oft beantwortet in SO. Suchen und finden eine gute Antwort. Wie

Veranstaltung verbindlich auf dynamisch erzeugte Elemente?

In jQuery, wie Ereignisse anfügen, um dynamische html-Elemente?

jquery binding events auf dynamisch geladene html-Elemente
- Vielen Dank für Ihre Zeit.Anstelle von "auf" ich "delegieren" und das ist gut so weit.
- $.delegate ist nur ein wrapper für $.on jetzt. Prüfen Sie hier, github.com/jquery/jquery/blob/master/src/event.js#L996
- Sie haben völlig Recht.Dies bedeutet, "auf" ist besser, weil es kürzer ist.
InformationsquelleAutor Prasenjit Kumar Nag
0

Code wird es nützlich.

Sind Sie durch das entfernen der Elemente vom Anfang, und dann einfügen am Ende der Schieberegler?

Wenn die Antwort ist "ja", sollten Sie
```
$('selector').delegate('subselector', 'hover', function() {
    //your code there
});
```
statt
```
$('selector subselector').hover( function() {
    //your code there
});
```
Bitte überprüfen Sie http://api.jquery.com/delegate/ für weitere Informationen.

InformationsquelleAutor Kasyx
0

Ich sehr empfehlen Sie zu verwenden livequery die Ihnen helfen, zusammen mit neu hinzugefügten Elemente in javascript. Ein Anwendungsbeispiel wäre:
```
 $('.elementAdded').livequery('event',function(){
    //do stuff
 })
```
Hatte ich mehrere Probleme mit .on() wie wird es gebunden Ereignisse zu Elementen, die nur einmal (nach dem Dokument bereit, zum Beispiel).

Hoffe, es hilft.
- Ich will nicht zu verwenden, keine zusätzlichen Bibliotheken
InformationsquelleAutor KoU_warch

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.