jQuery的：小部件不顯示在接下來的點擊

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/