jQuery委托回调

时间:2012-01-10 10:05:56

标签: javascript jquery

我在jQuery中使用.delegate()处理程序回调时遇到了一些问题。此设置使用2个文件 - 其中创建$ B,另一个使用简单的$(doc).ready文件。

我有一个SVG文件,其中有一堆(50+)<g>个标签,我需要在点击,翻转,推出等时跟踪,而不是将这些功能附加到<g>节点,代表看起来像一个更清洁的选择。

但是,我遇到了一个问题,我认为这是我对JavaScript的相对缺乏知识。

这是我的main ready()文件的设置:

$C.Events.onStation({
    click : function(e){
        console.log(e)
            return false;
    },
    mouseenter : function(e){
        return false;
    },
    mouseleave : function(e){
        return false;
    }
})

工作正常。一切都通过,等等。在我的$ B.Events对象中:

Events : new function(){
    var _station = function(obj){
        // delegate the events to the primary SVG node
        for(var type in obj){
            $(City.Map.node).delegate('g', type, function(){
            obj[type]()
        })
    }
    return {
        onStation : _station
    }
    // others taken out for relevance
}()

现在,有了这个,如果我只是传递obj[type]而不是将它包装在另一个函数中,它可以正常工作。唯一的问题是我需要对传入的函数进行一些预处理(即搞乱事件数据对象)以及将所有return false移动到委托代码中而不是弄乱我的其他档案。

那么如何在jQuery的.delegate()函数中的回调处理函数中执行第一个代码块中的函数?

编辑回复

我认为这是朝着正确方向迈出的一步。我有一种感觉,它具有JS的本质,而不一定是逻辑。这就是我有时讨厌Javascript的原因。

此解决方案的问题在于它将原语传递给通用构建器函数。我需要存储并返回一个可执行函数。我尝试过的一些事情都没有成功。这是我尝试过的很多事情的一个例子:

var _station = function(events){
    var _funcs = {}
    var _selection = null;

    var create = function(f){
        return function(){ return f() }
    }
    for(var t in events){
        _funcs[t] = create(t, events[t])
    }
    console.log(_funcs)

    // delegate the events to the primary SVG node
    for(var type in events){
        $('#stations', Bart.Map.node).delegate('g', type, function(e){                
            _funcs[type](e)
            e.stopPropagation()
        })
    }
}

当我log(_funcs[type])它作为一个函数返回时,但我不能在我的生命中执行它。

这种关闭的东西杀了我。

1 个答案:

答案 0 :(得分:2)

您仍然遇到生成闭包和循环的问题。您可以将type作为事件数据传递:

var $target = $('#stations', Bart.Map.node); // capturing is a good idea

for(var type in events){
    $target.on(type, 'g', {type: type}, function(e){                
        _funcs[e.data.type](e);
        e.stopPropagation();
    })
}

或者您可以使用events

迭代jQuery.each
$.each(events, function(type) {
    $target.on(type, 'g', function(e){                
        _funcs[type](e);
        e.stopPropagation();
    });
});

重要的是,每个闭包(事件处理程序)都可以访问它自己的type变量。

请注意,我使用.on()代替.delegate(),这是自jQuery 1.7以来的首选。