Question

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

使用jQuery，我试图将click事件绑定到动态生成的spans。我对JavaScript中的变量范围有一个公平的理解，但我显然遗漏了一些关于范围如何与事件绑定结合起作用的东西。查看关于范围问题的其他线程没有帮助（不是我的使用场景）。

我把它煮成了最低限度的测试。 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

经典关闭问题。看到固定的小提琴：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

jQuery范围（？）问题与最小案例演示

1 个答案: