multipleSelect()在动态添加的<select>上不能正常工作

Question

我在使用文志新的jQuery多重选择库。

如果我尝试在将元素附加到DOM之后立即将multipleSelect()应用于元素，则多个select显示为空白(没有任何选项)：

​

​

var template  = "<select multiple id='multiple-select'>";
    template +=     "<option value='1'>Apples</option>";
    template +=     "<option value='2'>Oranges</option>";
    template += "</select>";

$("#wrapper").html(template)

$("#multiple-select").multipleSelect();

但是，如果我使用multipleSelect()延迟setTimeout()调用，它可以工作：

​

​

setTimeout(function(){
    $("#multiple-select").multipleSelect();
}, 5000);

知道这是怎么回事吗？如何让库立即读取元素？我们的表单是使用Javascript动态生成的。

我还在图书馆的提出了一个问题页面上做了GitHub。

UPDATE!我正在对非活动引导选项卡中的<select>元素进行multipleSelect()调用。这似乎与问题有关，我可以在这里重新创建它：http://jsfiddle.net/zbkcgcam/1/。如您所见，multipleSelect()调用是在“search”选项卡中的<select>元素上进行的，当您打开search选项卡时，您可以看到故障。

解决了！您需要为<select>元素定义一个宽度，因为某种原因，如果<select>是嵌套在带有display: none的块级元素中的话。有关更多细节，请参见下面的答案。谢谢你的帮助！

Answer 1

解决了！在<select>元素上定义宽度似乎解决了这个问题。奇怪的是，只有当您调用multipleSelect()时，<select>元素才会发生，该元素包装在块级元素中，display: none集为.

我的问题与在库的GitHub页面(https://github.com/wenzhixin/multiple-select/issues/24)上发布的另一个问题直接相关，解决方案也在里面找到。

谢谢大家的意见。

Answer 2

对于动态内容，您必须设置一个观察者来注意添加内容的时间，或者在添加了内容之后调用您的函数。

jQuery异步工作，所以当您在使用.html()之后立即使用选择器时，html代码还没有到达DOM的可能性(几乎可以保证)。您可以使用.promise()确保在使用选择器之前.html()函数已经完成。

Answer 3

您可以在其“创建”时间将特定的类应用于select。

还请注意，您不需要搜索DOM以查找$("#multiple-select")，而是使用链子：

$("<select multiple id='multiple-select'>"+
      "<option value='1'>Apples</option>"+
      "<option value='2'>Oranges</option>"+
  "</select>"
)
.addClass('wide')
.appendTo("#wrapper")
.multipleSelect();

CSS：

.wide {
    min-width:200px;
}

演示