JQuery - Why Can't I Bind Events To Elements In A Loop?

Here is my code: var b = $(slipStream.conf.mainVis).find('p#prev'); b.click(function() { slipStream.slideLeft(); return false; }); b = $(slipStream.conf.mainVi

Solution 1:

When you enumerate over a jQuery object, the values being enumerated are actual DOM nodes and not jQuery wrappers. Therefore, they don't have a click method but you can wrap them again to get all the usual functionality.

Of course this is not necessary because you can simply attach a wrapper directly from your initial jQuery instance:

$(slipStream.conf.controls).find('li img').click(function() {
    var visIndex = $(this).index();
    console.log(visIndex);
});

Solution 2:

This is the classic "loop variables don't work properly in callbacks" bug.

Your variable l no longer has the originally supplied value by the time the callback is invoked - it has whatever final value was assigned in the last pass through the loop.

[FWIW, l isn't actually a jQuery object, so you have to wrap it - $(l) to use it with jQuery]

The usual fix to the loop bug is to create an additional closure that returns a function bound to the current value:

for (var l in b) {   // NB: don't use `for ... in ...` on array-like objects!
    var make_cb = function(n) {
         return function() {
              var visIndex = $(n).index();
              console.log(visIndex);
         }
    }
    $(l).click(make_cb(l));
};

Fortunately, you don't need a loop at all - you can have jQuery automatically add the callback to every element by itself:

b = $(slipStream.conf.controls).find('li img');
b.click(function() {
    var visIndex = $(this).index();
    console.log(visIndex);
});

Solution 3:

Could it be that the problem is the forloop. .click is part of the jQuery, so you must be sure that it's called on element that is wrapper with jQuery.

$.each(b, function (index, element) {
   $(element).click(function() {
   });
};

Solution 4:

With each() you can iterate through a set of jQuery objects:

$(slipStream.conf.controls).find('li img').each(function(){
    $(this).click(function() {
        var visIndex = $(this).index();
        console.log(visIndex);
    });
});

$(this) will match the currently indexed object from the collection.