我正在尝试编写一个小部件,允许我的代码的用户覆盖事件。
这是jsfiddle我正在尝试做的事情。
代码:
<div>Place Holder</div>
(function ($) {
$.widget("ui.mywidget", {
options: {
},
_create: function () {
},
myevent: function () {
alert('test1');
}
});
$('#placeHolder').mywidget({
myevent: function () {
alert('test2');
}
});
$('#placeHolder').mywidget('myevent');
})(jQuery);
$('#placeHolder').mywidget('myevent');
结果是显示“test1”的警报,但应该显示“test2”。我以为事情就这么简单。我在这里缺少什么?
最佳答案
这是一个很老的问题,但其他人可能也有同样的问题。
正如评论中所述,您可以将默认事件处理函数定义为可以轻松覆盖的选项:
$.widget("ui.mywidget", {
// Default option
options: {
'myevent': function() {
alert('test1');
}
},
// Public 'myevent' function
myevent: function() {
if($.isFunction(this.options.myevent))
this.options.myevent();
}
});
// Override the default 'myevent' option
$('#placeHolder').mywidget({
myevent: function() {
alert('test2');
}
});
$('#placeHolder').mywidget('myevent');
我更新了您的 jsFiddle 来说明它。
关于jQuery UI 小部件覆盖方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13406399/