Widget auf einem Element entfernen und erneut anwenden

Question

Ich habe ein Problem. Ich verwende das Widget auf select Element. Wenn ich die gleichen select Elementwerte neu lade, entferne ich das Widget auf dem Element select und erneut anwenden. Beim erneuten Anwenden des Widgets auf dasselbe Element spiegeln sich die Änderungen nicht wider.

Im Folgenden ist der HTML-select-Anweisung:

<select id="countries" class="multiselect" multiple="multiple" name="countries"> 
     <option value="USA">United States</option> 
     ... 
</select> 

Um das Widget auf dem gleichen Element anwenden:

function applyWidget(){ 
    $(".multiselect").multiselect(); 
} 

Sobald das Widget angewendet wird, ist es ein div mit class=".ui-multiselect" schafft.

das Widget-Klasse entfernen:

function removeWidget(){ 
    $(".ui-multiselect").remove(); 
} 

die applyWidget() Methode zum ersten Mal aufrufen wird fein arbeiten. Der zweite Anruf funktioniert nicht. Wie lade ich das Widget auf dem Element neu?

Answer 1

Sie müssen das Widget zerstören oder es wird nicht neu binden.

function removeWidget() { 
    $(".ui-multiselect").multiselect("destroy"); 
    $(".ui-multiselect").multiselect(); 
} 

Answer 2

Zuerst Ihr Widget benötigt eine destroy Methode zur Verfügung zu haben, und wie Sie sich auf das hängt davon ab, ob Sie mit jQueryUI 1.8 und unten oder jQueryUI 1.9 und höher verwenden.

Für diese Beispiele, ich bin der Annahme, dass Sie die Multiselect div mit dem folgenden Code referenziert werden:

_create: function() { 
    this.multiselect = $("<div>").addClass("ui-multiselect")... 
} 

Wenn Sie jQuery verwenden 1.8, sollte Ihr Widget destroy definieren:

destroy: function() 
{ 
    this.multiselect.remove(); 
    $.Widget.prototype.destroy.call(this); 
} 

Andernfalls unter jQuery 1.9+, müssen Sie _destroy definieren:

_destroy: function() 
{ 
    this.multiselect.remove(); 
} 

Beachten Sie, dass Sie je nach Ihrer Version von jQueryUI nur eine der beiden obigen Methoden einschließen und dass der Version 1.9 ein Unterstrich _ vorangestellt ist. Definieren Sie unter jQueryUI 1.9 nicht "destroy" ohne den Unterstrich, da die Widget-Factory diese Methode definiert und die Methode überschreibt (und bricht).

Sobald dies abgeschlossen ist, müssen Sie Ihren Code ändern, damit Sie das Widget "zerstören", bevor Sie es neu erstellen.

function removeWidget(){ 
    $(".multiselect").multiselect("destroy"); 
}