I need to do something like this:
for(int i =0; i< results.length; i++){
$('ul').append('<li>'+results[i].name+'</li>').bind('click',function(){
doSomething(results[i]);
})
}
but when the click happens, the object passed to doSomething is undefined. How do I solve this?
results[i] is only valid variable at the time machine is inside the for loop, later on, when event handler is triggered, result[i] is undefined.
That's why you need to ensure results[i] gets saved as variable in context of a function.
for(var i=0; i< results.length; i++){
(function(result) {
$('<li>'+result.name+'</li>').appendTo($('ul')).bind('click',function(){
doSomething(result);
})
})(results[i]);
}
Here's working example http://jsfiddle.net/T9aUq/.
Edit: Actually to make it really work, I had to change the way events are registered - at first, click handler was binded to elements matching $('ul') instead of new li element (since append() function of jQuery doesn't return appended element, but rather sticks to previous scope (which was ul).
(function(result) { ... })(results[i]);save your element first!
for(var i =0; i< results.length; i++){
var element = results[i];
var li = $('<li/>').html(element.name);
$('ul').append(li);
li.click(function(){
doSomething(element);
});
}
i is constantly changing.
i changes, so does element. See the other answer that addresses the issue with closures.
int instead of var, for two, the resulting handler would always fire doSomething function with last element of results array as argument. Check it out here: jsfiddle.net/9hTBaI actually ran into this same problem recently... Silly is right, however the variables need some form of encapsulation:
for(var i =0; i< results.length; i++) doThisFirst(i);
function doThisFirst(index) {
$('ul').append('<li>'+results[index].name+'</li>').bind('click',function(){
doSomething(results[index]);
})
}
If that doesn't work... Make sure you don't have a loop inside a loop with the same varname for the index:
for (var i = 0; ...) {
for (var i = 0; ...) {
}
}