jQuery scope (?) issue with minimal case demo

Question

I've been struggling with this one for several hours, a hint from someone who's had a similar coding situation would be welcome.

Using jQuery, I'm trying to bind a click event to dynamically generated spans. I have a fair understanding of variable scope in JavaScript but I'm obviously missing something as to how scopes work in conjunction with binding of events. Looking at other threads about scope issues did not help (not my usage scenario).

I've boiled it down to a minimal test. The jsfiddle is here: http://jsfiddle.net/xkT25/ Make sure you run it with the console open.

The interesting part is:

/** Add the click event handler to each span**/
for ( var i = 0; i < phones.length ; i++ ) {
    var span = $( '<span class="phone">' + phones[i].phone + '</span>' );
    console.log( 'phoneposition before .on(): ', phoneposition, span );
    span.on( 'click', function() { 
        // WHY IS phoneposition ALWAYS 4? (expecting an index between [0-3]
        console.log( ' phoneposition:' , phoneposition );
    });
    phoneposition++
    html = html.add( span );                
}

which results in a value of 4 all of the time. Instead, I need clicking letters to produce 0 for A, 1 for B, etc in the console.

PLEASE NOTE: it may look like I'm just trying to get the index of each span containing the letter but that is not the case. In practice (i.e.: outside the minimal case), the value I need in .on( 'click'... and the index of each span will often be different.

`function getHTML(input, option = null){` throws `Uncaught SyntaxError: Unexpected token =` — Cerbrus, May 13 '14 at 11:34

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

The classic closure issue. See the fixed fiddle: http://jsfiddle.net/xkT25/2/

Fixed code:

for ( var i = 0; i < phones.length ; i++ ) {
    (function(i) {
        var span = $( '<span class="phone">' + phones[i].phone + '</span>' );
        console.log( 'phoneposition before .on(): ', phoneposition, span );
        span.on( 'click', function() { 
            // WHY IS phoneposition ALWAYS 4? (expecting an index between [0-3]
            console.log( ' phoneposition:' , i );
        });
        html = html.add( span );                
    }(i));
}

More details here: JavaScript closure inside loops – simple practical example

edited May 23 '17 at 10:25

Community

1
1

answered May 13 '14 at 11:35

Florian Margaine

58,730
15
91
116

Clicking the letter spans still gives out ` phoneposition: 4` in the console. – Fabien Snauwaert May 13 '14 at 11:46
Right, my bad. @FabienSnauwaert use `i` instead of `phoneposition`. Updating my answer. – Florian Margaine May 13 '14 at 11:47
Thank you. That's the solution I'll be using. (The error in the first version actually helped me better understand what was going on!) Merci! – Fabien Snauwaert May 13 '14 at 12:22
By the way, is there a name for an anonymous function you call right away? – Fabien Snauwaert May 13 '14 at 12:37
1

@FabienSnauwaert yes, IIFE. Immediately Invoked Function Expression. – Florian Margaine May 13 '14 at 12:37

jQuery scope (?) issue with minimal case demo

1 Answers1