Question

我有以下jQuery小部件代码：

(function($){
    var _this,ele;
    $.widget('test.talkWidget',{
        options:{

        },
        destroy: function()
        {            
            $.Widget.prototype.destroy.call(this);
        },        
        _createTalkBox:function(){
            ele.find(".talk").prepend("<div>Hello</div>");
        },
        _create:function(){this.destroy();
            ele=this.element;
            _this=this;
            var p=$("<div/>").addClass("talk");
            ele.html(p);
            this._createTalkBox();
        }
    });
})(jQuery);

我在点击事件中将其称为以下内容：

$("#somediv").talkWidget();

问题是在第一次点击它创建上面的讨论小部件但在下一次单击它不显示小部件。为什么呢？

See it here

Answer 1

我不是插件开发专家，但您可以更改一次调用_create处理的事件，因此您可以使用_init

_init:

小部件具有与之不同的初始化概念创建。任何时候调用插件没有参数或只有选项哈希，窗口小部件被初始化;这包括什么时候小部件已创建。

代码：

(function ($) {
    var _this, ele;
    $.widget('test.talkWidget', {
        options: {

        },
        destroy: function () {
            $.Widget.prototype.destroy.call(this);
        },
        _createTalkBox: function () {
            ele.find(".talk").prepend("<div>Hello</div>");
        },
        _init: function () {
            this.destroy();
            ele = this.element;
            _this = this;
            var p = $("<div/>").addClass("talk");
            ele.html(p);
            this._createTalkBox();
        }
    });
})(jQuery);

演示：http://jsfiddle.net/RPs3S/

jquery：小部件不会在下次单击时显示

1 个答案: