Question

Hi have a function to console the array, and it works fine.

this is my function :

var arrayLength = outFitLinks.length-1;
    var depthCount = 0;
    for(i=1;i<=arrayLength;i++){
        $('.cloneFrame').clone().removeClass('cloneFrame').each(function(){
            i % 2 == 1 ? $(this).attr('id','id'+i).appendTo('.front') : $(this).attr('id','id'+i).appendTo('.back');
            $(this).find('.product-frame').each(function(index){
                depthCount += 1;
                $(this).find('img').attr('src', 'imgs/outfits/'+depthCount+'.jpg');
                $(this).find('a').each(function(){
                    console.log(outFitLinks[i][index]); 
                })
                $(this).parent().hide();
            })
        })

    }
    $('.cloneFrame').remove();

at the same function i changed to console to bind to click event, it’s not working.. anything wrong?

this is the function not working :

var arrayLength = outFitLinks.length-1;
    var depthCount = 0;
    for(i=1;i<=arrayLength;i++){
        $('.cloneFrame').clone().removeClass('cloneFrame').each(function(){
            i % 2 == 1 ? $(this).attr('id','id'+i).appendTo('.front') : $(this).attr('id','id'+i).appendTo('.back');
            $(this).find('.product-frame').each(function(index){
                depthCount += 1;
                $(this).find('img').attr('src', 'imgs/outfits/'+depthCount+'.jpg');
                $(this).find('a').bind('click', function(){
                    console.log(outFitLinks[i][index]); // not working  
                })
                $(this).parent().hide();
            })
        })

    }
    $('.cloneFrame').remove();

Answer 1

It doesn’t work because the event handler runs later, when the variable i (and possibly outFitLinks) has a different value from when the event was bound.

Create a closure, so that you can preserve each value for later in a local variable:

(function() {
  var links = outFitLinks[i][index];
  $(this).find('a').bind('click', function(){
    console.log(links);
  });
})();

Come to think of it, you already have a closure in this case, as you are using .each for the loop, so it should be enough with:

var links = outFitLinks[i][index];
$(this).find('a').bind('click', function(){
  console.log(links);
});