用于绑定(bind)对象中指定事件的 JavaScript 函数

Question

我正在创建一个函数，以这种格式输入 JavaScript 对象:

var input = {
    'selector1' : {
        'event1'    : function(element,value){
            // ...
        },
        'event2'    : function(element,value){
            // ...
        },
        ...
        'eventN'    : function(element,value){
            // ...
        }
    },
    'selector2' : {
        'event1'    : function(element,value){
            // ...
        },
        'event2'    : function(element,value){
            // ...
        },
        ...
        'eventN'    : function(element,value){
            // ...
        }
    }
}

我的函数以这种方式绑定(bind)事件:

function event_binder(events_fns){
    for(sel in events_fns){
        for(ev in events_fns[sel]){
            $(sel).on(ev,function(){
                console.log(sel+'+'+ev);
                var th = $(this);
                var func_to_call = events_fns[sel][ev];
                func_to_call(th,th.html());
            });
        }
    }
}

但是当我运行它时，它显示每个事件都已绑定(bind)到最后一个事件。

我创建了一个 jsFiddle 来更好地解释我的问题: http://jsfiddle.net/Polmonite/6rRgr/

正如 console.log 所建议的那样，事件绑定(bind)似乎总是使用最后一个 对象中的函数。 如果我的解释正确的话，似乎 .on 的评估 函数仅在最后发生，因此它使用 sel 和 ev 的最后一个值 变量(范围问题)，但我不太明白如何修复它。

编辑:我需要指定一件事:我想创建 event_binder 函数的工作版本，而不是 jsfiddle 的工作版本，它只是一个示例。

Answer 1

问题在于范围 - 整个函数中只有一个 sel 和 ev 变量，每次都会被覆盖。要创建一个新作用域(带有它自己的变量)，您必须将它们包装在它们自己的函数中。幸运的是，jQuery 提供了一个迭代函数，您可以向其传递函数，这样您就不会遇到此问题:$.each。请参阅:http://jsfiddle.net/6rRgr/3/ .

$.each(events_fns, function(sel, funcs) {
    $.each(funcs, function(ev, func) {
        $(sel).on(ev,function(){
            console.log(sel+'+'+ev);
            var th = $(this);
            func(th,th.html());
        });
    });
});