jquery on Methode funktioniert nicht

Question

Ich versuche, jquery auf Methode auf 1.7.2 zu verwenden, aber ich habe Probleme.

Ich bin mit diesem

$(function(){ 
$("a").on("click",'.displayBig', function(e) { 
    e.preventDefault(); 
    alert('foo'); 
})}); 
<a href="images/large_4.jpg" class="displayBig" data="gallery0"><div id="magnify">dsfsfdsfs</div></a>​ 

Es scheint, dass meine Wähler nicht funktioniert.

Ich habe hier ein Jfiddle erstellt.

http://jsfiddle.net/BQDvM/

Danke Jungs.

Answer 1

Wenn Sie die dynamische Version von .on() verwenden möchten, dann müssen Sie dieses Formular zu verwenden:

$(staticParentSelector).on('click', '.displayBig', fn); 

Die staticParentSelector muss ein Wähler sein, die einen Elternteil Ihrer dynami Punkte c Objekte und ist vorhanden, wenn Sie die obige jQuery ausführen, um die Ereignisbehandlungsroutinen zu installieren, und es muss ein Objekt sein, das nicht zerstört und neu erstellt wird, nachdem die Ereignisbehandlungsroutinen installiert wurden. Die Objekte, die mit dem zweiten Selektor übereinstimmen (ich nenne den dynamischen Selektor), müssen nicht zuerst existieren und können jederzeit in der Zukunft erstellt werden.

Im schlimmsten Fall könnte es sein:

$(document).on('click', '.displayBig', fn); 

Da das document Objekt erfüllt alle Kriterien für einen statischen Elternteil. Aber, führen Sie Ihre Ereignisse besser, wenn Sie ein statisch Eltern auswählen, die viel näher an die tatsächlichen dynamischen Objekten ist und wenn Sie nicht verwenden, um das document Objekt für alle dynamischen Ereignisse.

Also, wenn Sie HTML wie folgt hatte:

<div id="container"> 
    <a href="images/large_4.jpg" class="displayBig" data="gallery0"> 
     <div id="magnify">dsfsfdsfs</div> 
    </a> 
</div> 

Dann würden Sie eine dynamische Version von .on() wie folgt verwenden:

$("#container").on('click', '.displayBig', fn); 

Die Art und Weise die dynamische Version von .on() Arbeiten ist, dass Es bindet einen einzelnen Event-Handler an das statische Objekt. Wenn dann jemand auf eines Ihrer dynamischen Objekte klickt, gibt es keine direkten Event-Handler auf dem Objekt für den Klick, so dass der Klick durch die Vorfahrenobjekte aufsteigt. Wenn das Ereignis zu Ihrem staticParent-Objekt mit dem Ereignishandler gelangt, erkennt es, dass ein dynamischer Ereignishandler installiert ist, und vergleicht das Objekt, von dem das Ereignis stammt, mit dem dynamischen Selektor. Wenn sie übereinstimmen, wird der Ereignishandler ausgelöst. Wenn sie nicht übereinstimmen, wird kein Ereignis ausgelöst.

Answer 2

Oder wenn Sie sicher sein wollen, nur A-Tags wählen, könnten Sie verwenden:

$(function(){ 
    $('a.displayBig').on("click", function(e) { 
     e.preventDefault(); 
     alert('foo'); 
    }); 
}); 

http://jsfiddle.net/BQDvM/2/