我有一个问题.我在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();
}
一旦应用了小部件,它就会创建一个带有class =“.ui-multiselect”的div.
要删除窗口小部件类：
function removeWidget(){
$(".ui-multiselect").remove();
}
解决方法
首先,你的小部件需要有一个可用的destroy方法,你如何做到这取决于你是使用jQueryUI 1.8及以下版本还是jQueryUI 1.9及更高版本.
对于这些示例,我假设您使用以下代码引用multiselect 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下,不要在没有下划线的情况下定义destroy,因为widget工厂定义了该方法,你将覆盖(并破坏)该方法.
完成后,您需要更改代码,以便在重新创建窗口之前“销毁”窗口小部件.
function removeWidget(){
$(".multiselect").multiselect("destroy");
}