jquery UI 인스턴스를 파괴하는 경우

Question

나는 태깅 플러그인이 있습니다.

플러그인은 ajax를 통해 생성 된 양식 요소에서 사용됩니다. 양식 (아약스가) 제출 라이트를 제거 이제

... 
success : function(data) { 
    $.lightbox(data); 
    $('#groups').tagit(); 
} 
... 

같은

이

뭔가, 따라서 그렇게 형태이다.

그러나,

내가 #groups 이제 완전히 새로운 DOM 요소 임에도 불구하고, 플러그인이 이전 상태에있는 새로운 형태를 생성 버튼을 클릭합니다.

왜 이런가요? 어떻게 해결할 수 있습니까? 나는 변수가

(내 말은 같은 상태로)

태그가 추가로이 채워됩니다

_vars : {tags: []}

플러그인을합니다. 새 #group에서 플러그인을 다시 호출하면 tags 변수에 이전 인스턴스의 모든 태그가 포함됩니다.

어떻게 해결할 수 있습니까?

---

코드

$.widget("ui.tagit", { 

    // default options 
    options: { 
     tagSource: [], 
     allowSpace: true, 
     initialTags: [], 
     minLength: 1 
    }, 

    //private variables 
    _vars: { 
     lastKey: null, 
     element: null, 
     input: null, 
     tags: [] 
    }, 

    _keys: { 
     backspace: 8, 
     enter:  13, 
     space:  32, 
     comma:  44 
    }, 

    //initialization function 
    _create: function() { 

     var instance = this; 

     //store reference to the ul 
     this._vars.element = this.element; 

     //add class "tagit" for theming 
     this._vars.element.addClass("tagit"); 

     //add any initial tags added through html to the array 
     this._vars.element.children('li').each(function() { 
      instance.options.initialTags.push($(this).text()); 
     }); 

     //add the html input 
     this._vars.element.html('<li class="tagit-new"><input class="tagit-input" type="text" /></li>'); 

     this._vars.input = this._vars.element.find(".tagit-input"); 

     //setup click handler 
     $(this._vars.element).click(function(e) { 
      if (e.target.tagName == 'A') { 
       // Removes a tag when the little 'x' is clicked. 
       $(e.target).parent().remove(); 
       instance._popTag(); 
      } 
      else { 
       instance._vars.input.focus(); 
      } 
     }); 

     //setup autcomplete handler 

     this.options.appendTo = this._vars.element; 
     this.options.source = this.options.tagSource; 
     this.options.select = function(event, ui) { 
      instance._addTag(ui.item.value, ui.item.id); 
      return false; 
     } 
     this._vars.input.autocomplete(this.options); 

     //setup keydown handler 
     this._vars.input.keydown(function(event) { 
      var lastLi = instance._vars.element.children(".tagit-choice:last"); 
      if (event.which == instance._keys.backspace) 
       return instance._backspace(lastLi); 

      if (lastLi.hasClass('selected')) 
       lastLi.removeClass('selected'); 

      // Comma/Space/Enter are all valid delimiters for new tags. 
      else if (event.which == instance._keys.comma || (event.which == instance._keys.space && !instance.options.allowSpace) || event.which == instance._keys.enter) { 
       event.preventDefault(); 
       instance._addTag(this.value, 0); 
      } 
      instance._vars.lastKey = event.which; 
     }) 

     //define missing trim function for strings 
     String.prototype.trim = function() { 
      return this.replace(/^\s+|\s+$/g, ""); 
     }; 

     this._initialTags(); 

    }, 
    _popTag: function() { 
     return this._vars.tags.pop(); 
    }, 

    _addTag: function(value, id) { 
     id = (id == null ? 0 : id); 
     this._vars.input.val(""); 
     value = value.replace(/,+$/, ""); 
     value = value.trim(); 
     if (value == "" || this._exists(value)) 
      return false; 

     var tag = ""; 
     tag = '<li class="tagit-choice">' + value + '<a class="tagit-close">x</a></li>'; 
     $(tag).insertBefore(this._vars.input.parent()); 
     this._vars.input.val(""); 
     this._vars.tags.push({id: id, value: value}); 
    }, 

    _exists: function(value) { 
     if (this._vars.tags.length == 0) 
      return false; 
     for (var i = 0; i <= this._vars.tags.length-1; i++) 
      if (this._vars.tags[i].value == value) 
       return true; 
     return false; 
    } 
    , 

    _oc: function(array) { 
     var object = {}; 
     for (var i = 0; i < array.length; i++) { 
      object[array[i]] = ''; 
     } 
     return object; 
    } 
    , 

    _backspace: function(li) { 
     if (this._vars.input.val() == "") { 
      // When backspace is pressed, the last tag is deleted. 
      if (this._vars.lastKey == this._keys.backspace) { 
       $(this)._tagger('remove'); 
       li.remove(); 
       this._vars.lastKey = null; 
      } else { 
       li.addClass('selected'); 
       this._vars.lastKey = this._keys.backspace; 
      } 
     } 
     return true; 
    } 
    , 

    _initialTags: function() { 
     if (this.options.initialTags.length != 0) { 
      for (var i in this.options.initialTags) 
       if (!this._exists(this.options.initialTags[i])) 
        this._addTag(this.options.initialTags[i]); 
     } 
    } 
    , 

    tags: function() { 
     return this._vars.tags; 
    } 
}) 
     ; 

가 당신이

success : function(data) { 
    $.lightbox(data); 
    $('#groups').tagit("destroy").tagit(); 
} 

는 당신의 필요를위한 클래스

destroy: function() { 
     $.Widget.prototype.destroy.apply(this, arguments); // default destroy 
     // now do other stuff particular to this widget 
    } 

의 파괴 메소드를 오버라이드 (override)하는 것을 잊지 말아 다음을 수행 할 수

Answer 1

, 내가 생각 너 슈 uld가 당신의 vars를 파괴하고, 그것들을 제거하고, 무료 연결과 언 바인딩을합니다. destroy 메소드는 위젯이 적용된 요소를 원래 상태로 복원해야합니다.

예를 들어, 기본 파괴 방법을 알고 있습니다. 무엇을 위해 사용할 수 있습니까?

destroy: function() { 
     this.element 
      .unbind("." + this.widgetName) 
      .removeData(this.widgetName); 
     this.widget() 
      .unbind("." + this.widgetName) 
      .removeAttr("aria-disabled") 
      .removeClass(
       this.widgetBaseClass + "-disabled " + 
       "ui-state-disabled"); 
    }