在元素上移除和重新应用小部件

Question

我遇到了问题。我正在将这个小部件应用于select元素。当我重新加载相同的select元素值时，我将移除select元素上的小部件并重新应用。但在重新应用相同元素的小部件时，更改不会反映出来。

下面是HTML select语句：

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

要将相同元素的部件：

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

一旦应用插件，它创造了div与class=".ui-multiselect"。

要删除Widget类：

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

呼唤首次applyWidget()方法是工作的罚款。第二次调用不起作用。如何在元素上重新加载小部件？

Answer 1

你必须销毁小部件，否则它不会重新绑定。

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

Answer 2

首先，你的小部件需要有一个可用的destroy方法，以及如何做到这一点取决于您是否使用jQueryUI的1.8及以下或jQueryUI的1.9及以上。

在这些例子中，我在做，你是用下面的代码引用多选div的假设：

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

如果您使用jQuery 1.8，窗口小部件应该定义destroy：

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

否则，jQuery的1.9+下，您需要定义_destroy：

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

请注意，根据您的jQueryUI版本，您只包含上述两种方法之一，1.9版本前面加下划线_。在jQueryUI 1.9下，不要在没有下划线的情况下定义销毁，因为小部件工厂定义了该方法，并且您将覆盖（并中断）该方法。

一旦完成，您需要更改代码，以便在重新创建之前“销毁”小部件。

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