在循环中绑定事件处理程序需要关闭吗？答案

【问题标题】：Closure needed for binding event handlers within a loop?在循环中绑定事件处理程序需要关闭吗？
【发布时间】：2012-01-27 06:51:39
【问题描述】：

我正在尝试在循环中绑定事件处理程序，例如：

        var tabs = ['one', 'two', 'three', 'four']

        for(var i = 0; i < tabs.length; i++) {
            alert(tabs[i]);
            var id = i;
            $('#' + tabs[i]).bind('click', function() {
               loadTabs(id, tabs);
            });
        }

只保留最后一个绑定（值“四”）。

我正在尝试整合当前有效的代码：

        $('#one').click(function() {
            loadTabs(0, tabs);
        });

        $('#two').click(function() {
            loadTabs(1, tabs);
        });

        $('#three').click(function() {
            loadTabs(2, tabs);
        });

        $('#four').click(function() {
            loadTabs(3, tabs);
        });

由于this post，我认为我可能需要关闭。

【问题讨论】：

标签： javascript jquery closures bind

【解决方案1】：

由于您已经在使用 jQuery，因此您可以使用 jQuery.each 来完成此任务。因此，正如您正确假设的那样，您不需要自己使用closures。

var tabs = ['one', 'two', 'three', 'four'];

$.each(tabs, function(idx, tab) {
    $("#" + tab).on("click", function() {
        alert(idx);
        //loadTabs(idx, tabs);
    })
});

jsfiddle

【讨论】：

所以这现在是从演示中的 html 中的 div 中提醒 id 名称？
另外，您的方法假定您将按特定顺序（选项卡数组）添加它们。关键是要使其更加模块化，因此顺序无关紧要。
@bob_cobb：在我的示例中，数组中当前项目的索引被提醒。但这只是为了调试；你的第二条评论没有意义，因为你对循环做同样的事情只是复杂得多。尽管如此，您所说的“更模块化”是什么意思？我想不出有什么情况可以解决您以任何其他方式发布的这个特定问题。

【解决方案2】：

您在other post 中读到的内容是对的。您需要创建一个闭包来将参数绑定到每个单独的 onclick 处理程序：

$('#' + tabs[i]).bind(
    'click', 
    (function(id) {
        return function() 
        {
            loadTabs(id, tabs);
        };
    })(id)
);

您可能还想查看currying。在此示例中，您可能会创建一个小型辅助函数，它将第一个参数绑定到传递的函数并返回新函数。

function curry(func, arg1)
{
    return function()
    {
        func(arg);
    };
}

然后像这样放在一起：

$('#' + tabs[i]).bind(
    'click', 
    curry(function(id) { loadTabs(id); }, id)
);

请注意，我的 curry 函数与 currying 的定义不匹配，因为它忽略了任何其他参数。但它应该适用于您的情况。

【讨论】：