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){
            // ...
        }
    }
}

我的函数以这种方式绑定事件：

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

但是当我运行它时，它会显示每个事件都被绑定到最后一个事件。

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

正如console.log建议的那样，事件绑定似乎总是使用最后一个在对象中的功能。如果我解释得对，似乎对“.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());
        });
    });
});

Javascript函数绑定object中指定的事件

1 个答案: