.bind to dom objects within .each loop

Question

I am iterating over DOM elements using each but when the elements are made available inside the .each loop, they will not accept jQuery bind events.

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

How do I make each element available within the .each loop so I can bind events to them?

(I am iterating over the elements in this manner so I can conditionally exclude some of the elements from the bind, FWIW.)

gdoron · Accepted Answer · 2012-05-31 20:13:17Z

4

You need to wrap element in jQuery object:

$(element).mouseover(function(){

element (or this) is the DOM element, not the jQuery object.

Full code fixed:

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

From the each docs:

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

answered May 31, 2012 at 20:13

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Logan · Accepted Answer · 2012-05-31 20:16:29Z

0

Try this code :

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

answered May 31, 2012 at 20:16

Logan

1,6944 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

.bind to dom objects within .each loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related