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"。

删除小部件类：

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

第一次调用applyWidget()方法工作正常。第二次打电话不起作用。如何在元素上重新加载小部件？

Answer 1

首先，您的窗口小部件需要有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下，不要在没有下划线的情况下定义destroy，因为widget工厂定义了该方法，你将覆盖（并破坏）该方法。

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

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

Answer 2

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

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

删除并重新应用元素上的小部件

2 个答案: