jquery：小部件没有破坏正确重新应用

Question

这里是 jQuery 小部件代码：

(function($){
    var _this,ele,parent;
    $.widget('test.talkWidget',{
        options:{
            a:'',
            b:''
        },
        destroy: function()
        {
            alert("asas");
            this.element
            .remove( ".talk" )
            .text( "" );
             $.Widget.prototype.destroy.call(this);
        },        
        _createTalkBox:function(){
    ele.find(".talk").prepend("<h1>talk box added</h1>");

        },
        _addReply:function(){alert("reply added");            
        },
        _attachEvent:function(){
            ele.on('keypress','textarea',function(e){
                if(e.keyCode===13){
                    alert($(this).val());_this._addReply();
                }
            });
            ele.on('click','.accept-check-off',function(e){                
                $(this).closest(".media").removeClass("accept-check-off accept-check-on");
                $(this).addClass("accept-check-on");
            });
            ele.on('click','.accept-check-on',function(e){
                $(this).closest(".media").removeClass("accept-check-off accept-check-on");
                $(this).addClass("accept-check-off");
            });            
        },
        _init:function(){
            ele=this.element;
            _this=this;
            parent=$("<div/>").addClass("talk").append("<br/><textarea class='form-control' rows='3'></textarea>");
            ele.html(parent);
            this._createTalkBox();
            this._attachEvent();
        }
    });
})(jQuery);

我在这里调用这个小部件：

<div id="target"></div>

<button>Show Widget</button>
<button id="b2">Show normal Text</button>

问题是“添加回复”显示的次数与我单击“显示小部件”按钮的次数一样多。实际上，它应该只显示我在 Teaxtarea 内按 ENTER 键的次数。我认为小部件没有正确地破坏自己。

Check jsFiddle

Answer 1

小部件没有销毁，因为没有调用小部件工厂destroy() 函数。

在您的 jsFiddle 中，每次单击“显示小部件”按钮时，您：

• 先删除div #target的内容
• 然后调用不带参数的小部件。

多次调用不带参数的小部件会导致：

• 第一次：调用工厂create()函数（内部调用用户定义的_create()函数，但你没有），然后调用工厂init()函数（内部调用用户定义的_init()函数）
• 所有其他时间：仅调用 init() 函数

问题是你在_init()函数中绑定事件，所以每次调用插件时都会绑定新事件，也就是说每次点击按钮。另外，您使用button 选择器绑定了一个点击事件（调用您的插件），因此该事件被绑定在 2 个按钮上。

您应该定义一个只调用一次的_create() 函数，以定义只需要执行一次的操作，例如事件绑定。

看看这个 jsFiddle，它应该满足你的需要。我简化了你的代码并添加了一些解释。