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

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

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

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

Answer 2

试

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

Answer 3

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

jquery小部件_trigger和bind

3 个答案: