Quitar y volver a aplicar el widget en un elemento

Question

Tengo un problema. Estoy aplicando el widget en el elemento select. Cuando estoy recargando los mismos valores de elemento select, elimino el widget en el elemento select y vuelvo a aplicar. Pero al volver a aplicar el widget en el mismo elemento, los cambios no se reflejan.

A continuación se muestra la instrucción select de HTML:

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

Para aplicar el widget en el mismo elemento:

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

Una vez que se aplica el widget, se está creando un div con class=".ui-multiselect".

Para retirar la clase Widget:

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

Al llamar al método applyWidget() por primera vez está trabajando bien. Llamar por segunda vez no está funcionando. ¿Cómo recargo el widget en el elemento?

Answer 1

Tienes que destruir el widget o no volverá a enlazar.

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

Answer 2

En primer lugar, el widget tiene que tener un método destroy disponibles, y cómo se hace eso depende de si está utilizando jQueryUI 1,8 e inferior o jQueryUI 1.9 y superiores.

Para estos ejemplos, estoy haciendo la suposición de que se hace referencia a la selección múltiple div con el siguiente código:

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

Si está utilizando jQuery 1.8, el widget debe definir destroy:

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

de lo contrario, bajo jQuery 1.9+, es necesario definir _destroy:

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

Tenga en cuenta que solo incluye uno de los dos métodos anteriores, según su versión de jQueryUI, y que la versión 1.9 es precedida por un guión bajo _. Bajo jQueryUI 1.9, no defina destruir sin el guión bajo, porque la fábrica del widget define ese método y sobrescribirá (y romperá) el método.

Una vez que se completa, debe cambiar el código para que "destruya" el widget antes de volver a crearlo.

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