javascript - jQuery 范围(？)问题与最小案例演示

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 9 年前。

我已经在这个问题上苦苦挣扎了几个小时，欢迎有类似编码情况的人提供提示。

使用 jQuery，我尝试将单击事件绑定(bind)到动态生成的跨度。我对 JavaScript 中的变量作用域有相当的了解，但我显然忽略了作用域如何与事件绑定(bind)结合使用的一些内容。查看有关范围问题的其他线程没有帮助(不是我的使用场景)。

我已将其归结为一个最小的测试。 jsfiddle 在这里:http://jsfiddle.net/xkT25/确保在控制台打开的情况下运行它。

有趣的部分是:

/** 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 );                
}

其结果始终为 4。相反，我需要在控制台中单击字母来为 A 生成 0，为 B 生成 1，等等。

请注意:看起来我只是想获取包含该字母的每个范围的索引，但事实并非如此。在实践中(即:在最小情况之外)，我需要 .on( 'click'... 中的值并且每个跨度的索引往往会不同。

Answer 1

经典的关闭问题。请参阅固定 fiddle :http://jsfiddle.net/xkT25/2/

固定代码:

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));
}

更多详细信息请参见:JavaScript closure inside loops – simple practical example