creating dynamic elements with jquery click event always returns last index in for loop

Question

I have something like this:

var a = {
     generateDynamicStuff: function(data) {
           for(var i=0;i<data.length;i++) {
              var dyn_div = document.createElement('div');
              dyn_div.className = "dyn_div_"+data[i].name;
              dyn_div.textContent = data[i].name;
              document.getElementByClassName("dyn_list")[0].appendChild(dyn_div);

              $(document).on("click", ".dyn_div_"+data[i].name, function() { alert(i); a.otherFunction(i);});
           }
     },

     otherFunction: function(some_index) {....}
}

The idea is, I am given a list of names which I will generate clickable div elements with. When one of these divs are clicked, its index will be passed to otherFunction().

The problem is, function() { alert(i); a.otherFunction(i);} always gives the last index. That is, if I have 5 items, then i in the anonymous function is always giving me "4" no matter which div I am clicking.

Why is this?

Not really a full answer, but I had fun creating this jsfiddle.net/jameslafferty/bST4t, which kind of does what you're looking to do. — jameslafferty
– jameslafferty, Commented Nov 15, 2013 at 5:22

Sohil Desai · Accepted Answer · 2013-11-15 05:26:04Z

1

here is the scope problem here click event just binds the function not execute at binding time it executes when actually event occurs at that time it takes the last value of 'i' so you can try this

var a = {
 generateDynamicStuff: function(data) {
       for(var i=0;i<data.length;i++) {
          var dyn_div = document.createElement('div');
          dyn_div.className = "dyn_div_"+data[i].name;
          dyn_div.textContent = data[i].name;
          dyn_div.setAttribute("index", i);
          document.getElementByClassName("dyn_list")[0].appendChild(dyn_div);

          $(document).on("click", ".dyn_div_"+data[i].name, function(e) { 
               var index = $(this).attr("index");
               alert(index); 
               a.otherFunction(index);
          });
       }
 },

 otherFunction: function(some_index) {....}
}

answered Nov 15, 2013 at 5:26

Sohil Desai

2,9845 gold badges26 silver badges36 bronze badges

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

Comments

Arun P Johny · Accepted Answer · 2013-11-15 05:00:55Z

0

It is the classic closure variable in a loop issue

var a = {
    generateDynamicStuff: function (data) {
        var $ct = $('.dyn_list');
        $.each(data, function (i, data) {
            $('<div />', {
                'class': "dyn_div_" + data.name,
                text: data.name
            }).appendTo($ct).on('click', function () {
                alert(i);
                a.otherFunction(i);
            })
        })
    },

    otherFunction: function (some_index) {....
    }
}

answered Nov 15, 2013 at 5:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

creating dynamic elements with jquery click event always returns last index in for 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