jQuery auf() auf nicht funktioniert hinzugefügt bereits DOM Artikel

Question

Ich habe dies:

$(document).on("click", ".prev", function(){ 
    $(this).closest("div").find(".slider").animate({ 
     "left": "+=450px" 
    }, 800, "easeInOutBack"); 
    return false; 
}); 

Welche funktioniert, wenn neue Elemente in den DOM hinzugefügt werden, aber es funktioniert nicht für Elemente, die bereits in das DOM.

Wenn ich dies tun:

$(".prev").on("click", function(){ 
    $(this).closest("div").find(".slider").animate({ 
     "left": "+=450px" 
    }, 800, "easeInOutBack"); 
    return false; 
}); 

Es funktioniert für Elemente im DOM, aber nicht neue zu dem DOM hinzugefügt. Gibt es eine Möglichkeit für mich, dies für beide zu erledigen, ohne dass ich dies 2 Mal schreiben muss, oder einen Anruf bei einer anderen Funktion machen muss?

ist hier ein Screenshot:

So, hier ist eine weitere in der Tiefe Beschreibung, wie es funktioniert.

<div id="simple-pevs" style="padding-right: 20px;"> 
    <?php require_once __DIR__ . "/data/get/PEVSection.php"; ?> 
</div> 

Dann Wenn jemand einen anderen Abschnitt sie auf die Schaltfläche Hinzufügen klicken, um hinzuzufügen, die dann diesen Code ausgeführt wird:

$(".add-another-pev").click(function(){ 
     $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){ 
      $("#simple-pevs").append(data); 
     }); 
     pevGroup++; 
     return false; 
    }); 

Wie Sie es ruft das gleiche sehen, die vorbelastet war in der php. Das neue Werk (und alle anderen zusätzlichen diejenigen hinzugefügt) mit dem Click-Ereignis und die Faust ein nicht

@ArunPJohny

console.log($(".prev"));, nachdem ein neues Element hinzugefügt wird:

[a.prev, a.prev, prevObject: b.fn.b.init[1], context: document, selector: ".prev", jquery: "1.9.1", constructor: function…] 
0: a.prev 
1: a.prev 
context: #document 
length: 2 
prevObject: b.fn.b.init[1] 
selector: ".prev" 
__proto__: Object[0] 

Answer 1

Nein, wenn Sie neue Elemente wie dieses erstellen, müssen Sie den Ereignishandler erneut binden.

function bindHandler() { 
    $(document).on("click", ".prev", function(){ 
     $(this).closest("div").find(".slider").animate({ 
      "left": "+=450px" 
     }, 800, "easeInOutBack"); 
     return false; 
    }); 
} 
bindHandler(); 

$(".add-another-pev").click(function(){ 
    $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){ 
     $("#simple-pevs").append(data); 
    }); 
    pevGroup++; 

    bindHandler(); 
    return false; 
}); 

Answer 2

Im Folgenden ist der Inhalt, die ich von JQuery offizieller Website kopiert, kann sie es erklärt sehr deutlich: Eventhandler werden nur die aktuell ausgewählten Elemente gebunden ist; Sie müssen zu dem Zeitpunkt auf der Seite vorhanden sein, zu dem der Code den Aufruf von .on() aufruft. Um sicherzustellen, dass die Elemente vorhanden sind und ausgewählt werden können, führen Sie die Ereignisbindung in einem Dokument-Ready-Handler für Elemente aus, die sich im HTML-Markup auf der Seite befinden. Wenn neuer HTML-Code in die Seite eingefügt wird, wählen Sie die Elemente aus und hängen Sie Ereignishandler an, nachdem der neue HTML-Code in die Seite eingefügt wurde. Oder verwenden Sie delegierte Ereignisse zum Anhängen eines Ereignishandlers, wie im Folgenden beschrieben.

Delegierte Ereignisse haben den Vorteil, dass sie Ereignisse von untergeordneten Elementen verarbeiten können, die dem Dokument zu einem späteren Zeitpunkt hinzugefügt werden. Indem Sie ein Element auswählen, das zum Zeitpunkt der Anbindung des delegierten Event-Handlers garantiert vorhanden ist, können Sie delegierte Ereignisse verwenden, um zu vermeiden, dass Ereignishandler häufig angefügt und entfernt werden müssen. Dieses Element kann beispielsweise das Containerelement einer Ansicht in einem Model-View-Controller-Design sein oder ein Dokument, wenn der Event-Handler alle blasenbildenden Ereignisse im Dokument überwachen möchte. Das Dokumentelement steht im Kopf des Dokuments zur Verfügung, bevor ein anderer HTML-Code geladen wird. Es ist also sicher, Ereignisse dort anzuhängen, ohne darauf warten zu müssen, dass das Dokument fertig ist.

Zusätzlich zu ihrer Fähigkeit, Ereignisse auf noch nicht erstellten abgeleiteten Elementen zu verarbeiten, ist ein weiterer Vorteil von delegierten Ereignissen ihr Potenzial für viel geringeren Overhead, wenn viele Elemente überwacht werden müssen. Auf einer Datentabelle mit 1000 Zeilen in seiner tbody, legt dieses Beispiel einen Handler 1000 Elemente:

$("#dataTable tbody tr").on("click", function(event){ 
alert($(this).text()); 
}); 

Ein delegierter-Ereignisse Ansatz legt nur ein Element einen Event-Handler, der tbody, und das Ereignis nur muss eine Ebene höher sprudeln (vom geklickt tr zu tbody):

$("#dataTable tbody").on("click", "tr", function(event){ 
alert($(this).text()); 
}); 

Hinweis: Übertragene Ereignisse für SVG nicht funktionieren.

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