2

それぞれを使用してDOM要素を反復処理していますが、要素が.eachループ内で使用可能になると、jQueryバインドイベントを受け入れません。

$('#products .page_item').mouseover(function(){
   console.log('this works, adding the mouseover to every selected element');
});

$('#products .page_item').each(function(index, element){
    element.mouseover(function(){
        console.log("this throws 'not a function'");
    });
});

イベントをそれらにバインドできるように、各要素を.eachループ内で使用可能にするにはどうすればよいですか？

皆さんありがとう。

（私はこの方法で要素を反復処理しているので、条件付きでいくつかの要素をバインド、FWIWから除外できます。）

4

2 に答える 2

4

elementjQuery オブジェクトをラップする必要があります。

$(element).mouseover(function(){

element(またはthis) は DOM 要素であり、jQuery オブジェクトではありません。

完全なコードが修正されました:

$('#products .page_item').each(function(index, element){
    $(element).mouseover(function(){
        console.log("This works!");
    });
});

eachドキュメントから：

.each() メソッドは、DOM ループ構造を簡潔にし、エラーを起こしにくくするように設計されています。呼び出されると、jQuery オブジェクトの一部である DOM 要素を反復処理します。コールバックが実行されるたびに、0 から始まる現在のループ反復が渡されます。さらに重要なことに、コールバックは現在の DOM 要素のコンテキストで起動されるため、キーワード this は要素を参照します。

于 2012-05-31T20:13:17.763 に答える
0

このコードを試してください：

$('#products .page_item').mouseover(function(){
   console.log('this works, adding the mouseover to every selected element');
});

$('#products .page_item').each(function(index, element){
    $(element).mouseover(function(){
        console.log("this throws 'not a function'");
    });
});
于 2012-05-31T20:16:29.737 に答える