jquery onメソッドが動作しない

Question

1.7.2のメソッドでjqueryを使用しようとしていますが、問題が発生しています。

私はこの

$(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>​ 

を使用しています私のセレクタが動作していないようです。

私はここにjsfiddleを作成しました。

http://jsfiddle.net/BQDvM/

おかげでみんな。

Answer 1

あなたが.on()の動的なバージョンを使用したい場合は、あなたが必要

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

staticParentSelectorがあなたのdynamiの親を指すセレクタである必要があります。このフォームを使用しますイベントハンドラをインストールするために上記のjQueryを実行するときに存在し、イベントハンドラのインストール後に破棄されずに再作成されないオブジェクトでなければなりません。 2番目のセレクタ（ダイナミックセレクタと呼ぶ）と一致するオブジェクトは、最初は存在する必要はなく、将来いつでも作成できます。最悪の場合には

、それはこの可能性があります。static親のためのすべての基準documentオブジェクトを満たしているので

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

。しかし、あなたのイベントは、あなたの実際の動的オブジェクトに非常に近い静的な親を選んだ場合や、すべての動的イベントに対してdocumentオブジェクトを使用しないと、より良い結果が得られます。

だから、あなたはこのようにHTMLを持っていた場合：次に

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

、あなたはこのよう.on()の動的なバージョンを使用します。

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

方法を.on()作品の動的なバージョンがあることです単一のイベントハンドラを静的オブジェクトにバインドします。次に、誰かがあなたの動的オブジェクトをクリックすると、そのオブジェクトにクリックイベントのダイレクトイベントハンドラがないので、クリックが先祖オブジェクトをバブルアップします。イベントハンドラを持つstaticParentオブジェクトにイベントが到達すると、動的イベントハンドラがインストールされていることがわかり、イベントを発生させたオブジェクトをダイナミックセレクタと比較します。一致した場合、イベントハンドラを起動します。一致しない場合、イベントは発生しません。

Answer 2

それとものみタグを選択してくださいしたい場合は、あなたが使用できます。

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

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