在循环中绑定事件处理程序所需的闭包

Closure needed for binding event handlers within a loop?

本文关键字：闭包 程序 事件处理 循环 绑定      更新时间：2023-09-26

我试图在一个循环中绑定事件处理程序，如:

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

只保留最后一个边界(值' 4 ')。

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

        $('#one').click(function() {
            loadTabs(0, tabs);
        });
        $('#two').click(function() {
            loadTabs(1, tabs);
        });
        $('#three').click(function() {
            loadTabs(2, tabs);
        });
        $('#four').click(function() {
            loadTabs(3, tabs);
        });

我想我可能需要一个结束由于这篇文章。

你在其他帖子中读到的是对的。您需要创建一个闭包来将参数绑定到每个onclick处理程序:

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

你可能还想研究一下curry。在本例中，您可以创建一个小的辅助函数，它将第一个参数绑定到传递的函数并返回新函数。

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

然后像这样放在一起:

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

注意，我的curry函数不符合curry的定义，因为它忽略了任何其他参数。

如果你已经在使用jQuery，你可以使用jQuery。每个人都有这个任务。因此，您不需要像您正确地假设的那样，自己使用closures。

var tabs = ['one', 'two', 'three', 'four'];
$.each(tabs, function(idx, tab) {
    $("#" + tab).on("click", function() {
        alert(idx);
        //loadTabs(idx, tabs);
    })
});

jsfiddle

相关文章：