jQuery UI Widget Override方法

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