Question

我向DOM插入元素，之后我想将click函数绑定到这些元素。这样可行，但由于某种原因，创建的链接都返回相同的值，即是循环后的最高值'px_amount'。很奇怪:)第一个console.log（）; 返回正确的值，我可以看到它在每次迭代后递增。为了简单起见，我在click函数中添加了一个简单的console.log（）。

for(var i=1; i<=bullet_amount; i++)
{               
    $('<a id="bullet-'+i+'">'+i+' </a>').appendTo('#bullet-nav');

    px_amount = (i-1)*ratio*3450;
    console.log(px_amount);
    $("#bullet-"+i).live('click', function() {
        console.log(px_amount);
    });
}

Answer 1

这是一个非常常见的问题：变量i对于所有回调都是相同的，也就是封闭范围之一。

一个常见的解决方案是：

for(var i=1; i<=bullet_amount; i++)
{               
    (function(i){
      $('<a id="bullet-'+i+'">'+i+' </a>').appendTo('#bullet-nav');
      px_amount = (i-1)*ratio*3450;
      console.log(px_amount);
      $("#bullet-"+i).live('click', function() {
         console.log(px_amount);
      });
    })(i);
}

Answer 2

您应该使用闭包来捕获{em>引用的i reather的值：

for(var i=1; i<=bullet_amount; i++) {
    (function(iVal) {
        $('<a id="bullet-'+iVal+'">'+iVal+' </a>').appendTo('#bullet-nav');

        var px_amount = (iVal-1)*ratio*3450;
        console.log(px_amount);
        $("#bullet-"+iVal).live('click', function() {
            console.log(px_amount);
        });
    })(i);
}

jquery click函数始终返回最高值

2 个答案: