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()函数，但你没有函数），然后调用工厂{ {1}}函数（内部调用用户定义的init()函数）
所有其他时间：仅调用_init()函数

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

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

看看这个 jsFiddle ，它应该符合您的需求。我简化了一些代码并添加了一些解释。

jquery：小部件不会破坏正确的重新应用

1 个答案: