dom - .bind 到 .each 循环中的 dom 对象

Question

我正在使用 each 遍历 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 中排除一些元素。）

Answer 1

您需要包装element在 jQuery 对象中：

$(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 指的是该元素。

Answer 2

试试这个代码：

$('#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'");
    });
});