9

我有一个问题。我在元素上应用小 select部件。当我重新加载相同的select元素值时，我将删除元素上的小select部件并重新应用。但是，当在同一个元素上重新应用小部件时，这些变化并没有反映出来。

下面是 HTML 选择语句：

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

要将小部件应用于同一元素：

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

一旦应用了小部件，它就会创建一个divwith class=".ui-multiselect"。

要删除小部件类：

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

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

4

2 回答 2

12

首先，您的小部件需要有一个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，因为小部件工厂定义了该方法，您将覆盖（并破坏）该方法。

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

function removeWidget(){
    $(".multiselect").multiselect("destroy");
}
于 2013-04-17T16:13:07.613 回答
3

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

function removeWidget() { 
    $(".ui-multiselect").multiselect("destroy");
    $(".ui-multiselect").multiselect(); 
}
于 2012-05-22T20:46:52.310 回答