Question

我正在使用每个元素迭代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 docs：

.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'");
    });
});

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

2 个答案: