Javascript/jQuery attach different function args to .click() method

Question

What's wrong with this code? Reading this it seems that for each loop the jquery should attach a function with assigned values for each iteration. Instead it's attaching i = 2 to every object. Why is it doing that and how can I get it to attach the expected values (e.g., 0, 1, ...)?

//data.length is 2.

for (i=0; i<data.length; i++) {
    // Attach the click function
    linkId = 'a#' + pk;
    $(linkId).click(function(e) {
        e.preventDefault();
        console.log(i, pk, data);
    });
};

console.log -- each link has the same parameters

2 "52fef25e391a56206f03be6e" [object Array]

Classical closure+loop confusion.

dfsq
– dfsq

2014-02-15 21:25:08 +00:00
Commented Feb 15, 2014 at 21:25 — dfsq
– dfsq, Commented Feb 15, 2014 at 21:25

cookie monster · Accepted Answer · 2014-02-15 21:30:48Z

2

You're assuming that a block creates a new variable scope. It doesn't in JavaScript. Only a function execution does.

If you use $.each() instead, the callback you give it will be invoked for each iteration, and so you'll have a new scope for every one.

$.each(data, function(i,item) {
                //    ^---^---function parameters are local to this scope

//   v--declare a variable local to this scope
    var linkId = 'a#' + pk;

                //   v--the function made in this scope can access the local vars
    $(linkId).click(function(e) {
        e.preventDefault();
        console.log(i, pk, data, linkId, data[i]);
    });
});

answered Feb 15, 2014 at 21:30

cookie monster

11k4 gold badges33 silver badges45 bronze badges

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

2 Comments

James Over a year ago

This is very helpful and I've used your answer to solve my problem at hand. Thank you. However, for knowledge's sake, to get my original code to work, is it possible to declare variables within the scope of each iteration? I tried that but it didn't seem to work.

cookie monster Over a year ago

@TechMedicNYC: No, not without a function invocation of some sort. Blocks alone in JS simply don't define any type of variable scope. The next version of JS will have block scope by declaring variables with the let keyword. This is available today in Firefox as well as the newest versions of Chrome (when a flag is set) and I believe IE11.

Emil Borconi · Accepted Answer · 2014-02-15 21:27:33Z

2

console will be displayed only when you click the $(linkId) but at the time is is already equal to data.length (aka 2 in your case) so it will always display 2

answered Feb 15, 2014 at 21:27

Emil Borconi

3,4972 gold badges29 silver badges42 bronze badges

Comments

ctietze · Accepted Answer · 2014-02-15 21:25:15Z

0

Try to isolate the variable's scope. Declare a var j = i; inside the loop context so it enters the click-callback's scope.

answered Feb 15, 2014 at 21:25

ctietze

2,95329 silver badges48 bronze badges

Comments

dfsq · Accepted Answer · 2014-02-15 21:33:00Z

0

So in order to create a separate scope for each iteration you can also use ordinary closure-functions, and pass current i into it:

for (var i = 0; i < data.length; i++) {
    (function(j) {
        $('a#' + pk).click(function(e) {
            e.preventDefault();
            console.log(j, pk, data);
        });
    })(i);
};

answered Feb 15, 2014 at 21:33

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery attach different function args to .click() method

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related