JQuery Widget Factory-初始化后无法绑定事件监听器-

时间:2019-04-30 17:09:21

标签: jquery widget

我正在尝试使用小部件工厂扩展JQuery.ui.draggable。直到初始化事件后再设置事件为止,一切似乎都工作正常,此时事件绑定似乎无法正常工作。在其他情况下,例如在init上设置事件也可以。

//
// extend jquery ui draggable
//
$.widget("ui.drag2", $.ui.draggable, {
     options: {
        shiftable: false,
        shiftContainer: null,
        shiftableSelKeys: {}
     }
     _initShiftable: function () {},
     _shiftTarget: function () {}

});

// 
// after the above is defined, i can call this below, and draggable works //(effectively inheriting from ui.draggable and containing all my new members
//
$('.myClass').drag2(); 

// 
// I can also do this, and get a custom callback bound to drag (msg)
//
$('.myClass').drag2({
    drag: function (ui, evt) {
       console.log(' -- dragging -- ');
   }
}); 

// But this Doesn't work ?
// I don't understand why binding the event after its been intialized doesn't // work
$('.myClass').on('drag', function (ui, evt) { console.log('-- dragging --'); }); // Doesn't work ?


1 个答案:

答案 0 :(得分:0)

我需要为我的插件定义私有方法_setOption。这会将您传递的选项应用于您要从其继承的父窗口小部件。由于我依赖于其拖动的实现,因此我需要将该选项应用于父窗口小部件。


$.widget("ui.drag2", $.ui.draggable, {
    options: {
        shiftable: false,
        shiftContainer: null,
        shiftableSelKeys: {}
    },
     _setOption: function (key, value) {
        // invoke setOption for draggable
        this._super(key, value);
        this._superApply(arguments);
    }

});

// setting drag callback
$('.target').drag2('option', 'drag', function (){ console.log('hello world'); );