我有一个 Javascript 对象文字:

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.Bar.find('clearButton').click(function() {
            this.trigger('clear'); // doesn't work!
            this.Bar.trigger('clear'); // works!
    }
}

Toolbar.init($('div.toolbar'));
Toolbar.bind('clear', function() { ... }); // doesn't work!
Toolbar.Bar.bind('clear', function() { ... }); // works!

我希望能够在 Toolbar 对象文字而不是文字中引用的工具栏 DOM 对象上触发 clear 事件。这可能吗,如果可以,我该怎么做?

最佳答案

这应该有效:

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.Bar.find('.clearButton').click($.proxy(function() {
            $(this).trigger('clear'); // should work now
            this.Bar.trigger('clear'); // still works
        }, this));
    }
};

Toolbar.init($('div.toolbar'));

$(Toolbar).bind('clear', function() {
    console.log('Toolbar');
}); // should work now

Toolbar.Bar.bind('clear', function() {
    console.log('Toolbar.Bar');
}); // still works
  • 需要维护click函数中的this引用。我使用了 $.proxy ;有些人使用 var self = this;
  • Toolbar 不是一个 jQuery 对象,所以它应该包含在 $() 中以访问 jQuery 的函数。还将引用 this 实例的 Toolbar 包装在 click 函数中。
  • 关于javascript - Javascript 文字对象可以触发事件吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8365037/

    10-10 14:18
    查看更多