传递给.on()函数的变量总是最后一个元素

时间:2013-01-30 22:24:34

标签: javascript jquery

我有点像这样的对象模仿Backbone的事件系统:

var events = {
    'click .one': 'fnOne',
    'click .two': 'fnTwo',
    'click .three': 'fnThree'
}

然后使用jquery设置事件监听器我正在使用以下内容:

var method,
    match,
    event_name,
    selector;

var scope = {
     // Complex object literal passed to the event's
     // function for access...
};

var delegateEventSplitter = /^(\S+)\s*(.*)$/;
for (key in events) {
    if (events.hasOwnProperty(key)) {
        method = events[key];
        match = key.match(delegateEventSplitter);
        event_name = match[1];
        selector = match[2];

        $('#element').on(event_name,selector,function(event){ 
            method(event,scope);
        });
     }
}

我遇到的问题是它的绑定是正确的,除了所有事件触发最后一个函数fnThree

2 个答案:

答案 0 :(得分:3)

只是一个闭包/循环问题。闭包只绑定词法名称,而不是当时的值。

我最喜欢的捕捉价值的方法之一是with

for (key in events) {
    if (events.hasOwnProperty(key)) {
        method = events[key];
        match = key.match(delegateEventSplitter);
        event_name = match[1];
        selector = match[2];

        with ({method:method})
        {
            $('#element').on(event_name,selector,function(event){ 
               method(event,scope);
            });
        }
    }
}

但这会导致Doug Crockford的一些助手死于心脏病发作,所以你也可以这样做:

            (function(method) { $('#element').on(event_name,selector,function(event){ 
               method(event,scope);
            }); })(method);

我会让你决定哪个更合适。

答案 1 :(得分:1)

尝试使用$.each()。它的函数参数在每次迭代时都很方便地形成一个闭包。

$.each(events, function(key, method) {
    var match = key.match(delegateEventSplitter);
    $('#element').on(match[1], match[2], function(event){ 
        method(event, scope);
    });
});