jQuery UI Widget 覆盖方法

Question

我正在尝试编写一个小部件，允许我的代码用户覆盖事件。

这是我正在尝试做的事情的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"。 我以为事情就这么简单了。 我在这里错过了什么？

Answer 1

这是一个相当古老的问题，但其他人可能有同样的问题。

如注释中所述，您可以将默认事件处理程序函数定义为可以轻松覆盖的选项：

$.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来说明它。