jquery - ループ内でのイベントハンドラの割り当て -- 奇妙な動作

Question

jQuery を使用して、div 内の多くの要素にイベントハンドラーを割り当てています。単一の要素でjQueryの「ネイティブ」onまたはメソッドを使用している場合、すべてが機能します。clickただし、ループ内で実行しようとすると、何も起こりません。

動作しない次のコードがあります。

$tags = $("#some_div p");
var len = $tags.length;
for(var i = 0; i < len; i++)
{
    $tags[i].on('click', function(){ alert("hi"); });
}

そして、このコードは機能します:

$tags = $("#some_div p");
var len = $tags.length;
for(var i = 0; i < len; i++)
{
    $tags[i].onclick = function() { alert("hello"); };
}

onclick(function()...)最初のケースでも試しましたが、試し$.forEachましたが、動作は常に同じです。ここで JS フィドルを作成しました: http://jsfiddle.net/fM2ar/

jQueryの経験はあまりありませんが、ドキュメントを読んだところ、最初の方法が機能するはずです。どんな助けも大歓迎です。

score 2 · Accepted Answer

$tags[i]jQuery オブジェクトではなく、DOMElement を提供します。onclickはDOMプロパティであり、これが機能する理由です。on()は jQuery メソッドであるため、機能しません。

on()メソッドを使用するには、DOMElement を jQuery オブジェクトでラップするだけです。

$($tags[i]).on('click', function(){ alert("hi"); });

または、 jQuery オブジェクトにラップされたposition の要素を返すeq(i)メソッドを使用することもできます。i

$tags.eq(i).on('click', function(){ alert("hi"); });

score 1 · Accepted Answer

forループはまったく必要ありません:

$("#some_div p").on('click', function() {
    alert( this.innerHTML );
});

jquery - ループ内でのイベント ハンドラの割り当て -- 奇妙な動作