jquery - jquery 小部件 _trigger 和绑定

Question

我正在尝试使我的 jquery 小部件松散耦合，但是 _trigger 和 bind 的使用没有按预期工作。

这是我的小部件（使用http://msdn.microsoft.com/en-us/library/hh404085作为参考）：

(function ($, undefined) {
  $.widget('qs.tagger', {
    _create: function () {
      var that = this,
        name = this.name;

      that.element.bind('mouseenter', function (event) {
        that._trigger('activated', event, {name: 'hello'});
        console.log('mouseenter');
      });
    },
    destroy: function () {
      this._destroy();
    }
  });
}(jQuery));

调用它看起来像这样

$('#results').tagger();

这是实例化和绑定：

  $('#results').tagger();

  $('#search-form').bind('taggeractivated', function (event, data) {
    console.log('world');
  });

当我检查 console.log 时，我看到鼠标输入事件被触发，但我从未看到绑定事件被调用。

Answer 1

这不是小部件工厂 _trigger 方法的工作方式。如果你想使用 _trigger 你必须这样做：

$('#results').tagger({
     activated: function (event, data) {

          console.log('hello activated world');
     }
});

Answer 2

在不知道您的 HTML 结构的情况下，我在黑暗中刺伤并说该$('#results')元素不是该元素的后代$('#search-form')。插件抛出的事件只能被实例化插件的对象或祖先捕获。如果您需要更多帮助，请提供 HTML，或者更好的是，通过jsfiddle.net提供 HTML 和 JavaScript 。

Answer 3

尝试

$('#results').tagger();
$('#search-form').on('activated', function (event, data) {console.log('world');});