JQuery for loop stuck at last index

Question

I have function process_row that appends tags to html, and those tags are chained to a function upon clicked. (in this case, simply alert(i), its position in the result array).

But however, upon being clicked, the newly generated alerts the length of the entire result array. I have tried many, many changes to try and make it work, but it doesn't.

Strange thou, fab_div.attr("id", result_data[0]); works fine !! In Chrome inspect element the id tags are displayed as they are, but the click function points everything to the last element in the array.

for example, if I do, fab_div.click(function () { alert(result_data[0]) });, I get the name of the LAST element in the array, doesn't matter which element was clicked.

can anyone please explain to me... WHY??

I think it may have something to do with $("<div>") where JQuery thinks it's the same div that it's assigning to. Is there any way around this? The 's are generated dynamically and I would not want to let PHP do the echoing. Plus the content may be updated realtime.

Example dataset :

Smith_Jones#Smith#Jones@janet_Moore#Janet#Moore@Andrew_Wilson#Andrew#Wilson

After many, many changes, still not working:

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        

        result_data =result_array[0].split("#");        

        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>");
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            fab_div.append(fab_text)
            // fab_div.click(function () { alert(i) }); 
            // ^ not working, try appending list of id's to id_list
            id_list.push(result_data[0])
            $('#ls_admin').append(fab_div)      
        }           

        for(j = 0; j < id_list.length; j++){
            $('#' + id_list[j]).click(function () { alert(j) })
        }               
    }
}

Original Attempt:

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        

        result_data =result_array[0].split("#");        

        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>").append(fab_text).click(function () { alert(i) });  
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            $('#ls_admin').append(fab_div)
        }       
    }
}

typical for loop scope failure. for loops don't create scopes, therefore all click callbacks will alert the value of j after the loop finishes. — Kevin B, Aug 28 '13 at 18:55
but the problem was there without the second for loop, see original attempt. — William Yang, Aug 28 '13 at 18:56
It's still the same problem. the loop will finish and `i` inside the click event will be the same `i` as after the for loop, which will be it's last value. — Kevin B, Aug 28 '13 at 18:58
*"I think it may have something to do with $("
")"* Nope. that's not it. — Kevin B, Aug 28 '13 at 19:00
But then how do you get the i inside the for loop to "increment"? — William Yang, Aug 28 '13 at 19:01
by giving each iteration of the for loop it's own scope using an IIFE. Or by instead using jQuery's $.each method rather than a for loop. — Kevin B, Aug 28 '13 at 19:01
That would be one way of fixing it. Probably the prettiest way. — Kevin B, Aug 28 '13 at 19:04

score 0 · Answer 1 · answered Aug 28 '13 at 19:18

If you must use an alert, then you can encapsulate the click handler in a self executing function and pass the index to it. Like,

(function (index) {
     fab_div.click(function () {
         alert(index);
     });
})(i);

Although, this is not a clean way to do it. Otherwise, if you are looking to just manipulate the div element is any way, then adding any method directly will also work. Like,

fab_div.click(function () {
        alert($(this).attr('id'));
});

You can refer a jsFiddle here

score 0 · Answer 2 · answered Aug 28 '13 at 19:20

Wonky Solution, but it worked! Haha! Big thanks to Kevin B.

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        
        result_data =result_array[0].split("#");

        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>").append(fab_text);
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            $('#ls_admin').append(fab_div)
        }       

        $("#ls_admin").children(this).each(function( index ) {
            $(this).append($(this).click(function () { alert($(this).text()) }));
        }); 
    }
}

JQuery for loop stuck at last index

2 Answers2