Question

我正在创建一个jQuery插件来进行分页，遇到了以下问题。

当我点击下面插件创建的页面链接时，它总是会给出我们在下面代码的最后一个迭代器中传递给值i的最后一个索引的值。如果有4个页面，如果我按下链接1,2,3或4，我将总是得到4个。似乎对委托onclick的引用也保持对i的值的引用而不仅仅是值。

任何想法？这是 options.onclick（i），表现得很奇怪。

$.fn.pager = function(options) {
    var defaults = {
        resultSet: undefined,
        onclick: function(page) { alert(page); return false; },
    };

    return this.each(function () {
        var rnd = Math.floor(Math.random()*9999)
        var result = '';
        for(var i = 1; i <= options.resultSet.PageCount; i++)
        {
            if(i == options.resultSet.PageCount)
                result += '<a href="#" id="' + rnd + '_pagerPage_' + i + '">' + i + '</a>';
            else
                result += '<a href="#" id="' + rnd + '_pagerPage_' + i + '">' + i + '</a>' + options.separator;
        }

        $(this).html(result);

        for(var i = 1; i <= options.resultSet.PageCount; i++)
        {
            $('#' + rnd + '_pagerPage_' + i).click(function() { options.onclick(i) });
        }
    });
}

我将上面的代码简化为问题情况。因此缺少一些检查;）

Answer 1

似乎对委托onclick的引用也保留了对i的值的引用，而不仅仅是值。

您遇到的是您第一次（意外）遇到闭包。它甚至不是一个被传递的参考，它比那更奇怪。要了解正在发生的事情（如果你使用javascript进行编程，这一点很重要，这些被认为是基本的东西）阅读我对以下相关问题的回答：

Please explain the use of JavaScript closures in loops

Hidden Features of JavaScript?

Answer 2

这是一个经典问题：在i选项事件处理函数中使用的click的值是i在事件触发时的值{将是4，它在循环中的最终值），而不是它在您分配事件处理程序时的值。绕过它的方法是每次通过循环创建一个额外的函数，该循环有自己的变量，在其被调用的位置包含值i的副本：

var createClickHandler = function(n) {
    return function() { options.onclick(n); };
};
$('#' + rnd + '_pagerPage_' + i).click( createClickHandler(i) );

按值/引用问题引用Javascript

2 个答案: