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

bob*_*obb 3 javascript jquery closures bind

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

        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);
            });
        }
Run Code Online (Sandbox Code Playgroud)

只保留最后一个绑定(值'四').

我正在尝试整合当前可行的代码:

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

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

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

        $('#four').click(function() {
            loadTabs(3, tabs);
        });
Run Code Online (Sandbox Code Playgroud)

以为我可能需要关闭此帖子.

cop*_*opy 5

你在另一篇文章中读到的内容是正确.您需要创建一个闭包来将参数绑定到每个单独的onclick处理程序:

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

你可能也想看看currying.在此示例中,您可以创建一个小辅助函数,它将第一个参数绑定到传递的函数并返回新函数.

function curry(func, arg1)
{
    return function()
    {
        func(arg);
    };
}
Run Code Online (Sandbox Code Playgroud)

然后把它放在一起像这样:

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

请注意,我的curry函数与currying的定义不匹配,因为它忽略了任何其他参数.但它应该适合你的情况.