Question

I’m trying to dynamically add buttons, and add a jQuery listening even to them.
However, I’m having troubles with JavaScript’s scoping (at least I think that’s it is).

This is pretty much my code:

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + item);
    });
}

Now the problem is that no matter which button I click, the alert inside the event callback always uses the last item.

Now I understand why this is happening (well, roughly :P), but how I can fix it?

Answer 1

You can use jQuery’s $.each method to iterate over the group array in the same way, but this will solve the issue for you:

    $.each(group,function(i,v){
        $('div').append("<input type='button' value='" + v + "' id = 'id" + v + "'>");
        console.log($('#id' + v))
        $('#id' + v).click(function() {
            alert("Hello from " + v);
        });
    });

http://jsfiddle.net/ebiewener/byV9X/