Binding click event handlers in a loop causing problems in jQuery

Question

I am trying to run the following code:

I pass parameter to a function, but it always has the value of the last object run through the loop. I read some articles about it on stackoverflow, but I couldn't find out how to make it run in my solution.

The object is a JSON object returned from the server. All it's values are correct.

for(var i = 0;i<parents.length;i++){
            var row        = $(document.createElement("tr"));
            var colName    = $(document.createElement("td"));

            var aDisplayCol = $(document.createElement("a"));

            var parentId = parents[i]['PARENT_ID'];

            aDisplayCol.attr("href","#").html(parents[i]['NAME']);
            aDisplayCol.bind('click',function(){ alert(parentId);});


            colName.append(aDisplayCol);

            row.append(colName);
            $('#pages tbody').append(row);

}

Thanks

Andre de Souza · Accepted Answer · 2012-04-10 15:48:37Z

8

It is a scope problem. By the time the event handler function is executed, the value of parentId has changed and is not longer what you expected.

This can be solved making the original event handler function be returned by another function which, in turn, is passed the value of parentId as argument:

function getEventHandlerFunction(id){
    return function() {
        alert(id);  // variable found in the closure with the expected value
    };
}


aDisplayCol.bind('click', getEventHandlerFunction(parentId));

answered Apr 10, 2012 at 15:48

Andre de Souza

961 silver badge2 bronze badges

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

Comments

DLH · Accepted Answer · 2010-08-20 14:03:44Z

2

Perhaps there's a problem with using parentId in the callback.

Try alert(parents[i]['PARENT_ID']);.

EDIT: Let's see if we can get around our scope issues with .data().

aDisplayCol.data("parentId",parents[i]['PARENT_ID']);
aDisplayCol.click(function() {
   alert($(this).data('parentId'));
});

edited Aug 20, 2010 at 14:03

answered Aug 20, 2010 at 13:52

DLH

2,8313 gold badges25 silver badges30 bronze badges

4 Comments

Kel Over a year ago

Nope, that's not causing it. Actually, I discovered yesterday that the .click function can't handle the following: aDisplayCol.click(function(){ whatever(target,dest, parents[i]['PARENT_ID']); return false; }); I assume it is a bug. Passing a variable instead works fine.

DLH Over a year ago

Nah I don't think it's a bug. I think it's a scope issue. I don't think i exists within the scope of the click handler.

Kel Over a year ago

you forgot to close the parenthesis at .data

Kel Over a year ago

using .data worked! AWESOME :D thanks. It is a closure problem.

Pjl · Accepted Answer · 2013-03-04 04:38:53Z

1

You can avoid the clouseres problems with the eventData parameter of the bind function like this

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
    alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
    alert(event.data.msg);
});

this is from the jquery bind api documentation http://api.jquery.com/bind/#passing-event-data

answered Mar 4, 2013 at 4:38

Pjl

1,81219 silver badges22 bronze badges

Collectives™ on Stack Overflow

Binding click event handlers in a loop causing problems in jQuery

3 Answers 3

Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Linked

Related