jquery-ui - 删除和重新应用元素上的小部件

Question

我有一个问题。我在select元素上应用了小部件。当我重新加载相同的select元素值时，我将删除select元素上的小部件并重新应用。但是，当在同一元素上重新应用小部件时，所做的更改不会反射(reflect)出来。

以下是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及以上版本。

对于这些示例，我假设您正在使用以下代码引用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，因为小部件工厂定义了该方法，您将覆盖(并中断)该方法。

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

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