0

这是 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 键的次数。我认为小部件没有正确地破坏自己。

检查 jsFiddle

4

1 回答 1

1

小部件没有被破坏，因为没有调用小部件工厂destroy()函数。

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

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

多次调用没有参数的小部件会导致：

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

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

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

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

于 2014-01-16T23:27:05.537 回答