multiSelect（）在动态添加<select> </select>时无法正常工作

Question

我正在使用wenzhixin的jQuery Multiple Select库。

如果我在将该元素附加到DOM后立即尝试将multipleSelect()应用于元素，则多重选择显示为空白（不带任何选项）：

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页面上filed an issue。

更新！我在非活动的Bootstrap选项卡中对multipleSelect()元素进行<select>调用。这似乎与问题有关，我可以在这里重新创建它：http://jsfiddle.net/zbkcgcam/1/。正如您所看到的，multipleSelect()来电正在＆＃39;搜索＆＃39;中的<select>元素上进行。选项卡，当您打开搜索选项卡时，您可以看到故障。

已解决！如果<select>嵌套在具有{{的块级元素内，则需要为<select>元素定义宽度。 1}}。有关详细信息，请参阅下面的答案。谢谢你的帮助！

Answer 1

对于动态内容，您必须设置观察者以注意添加内容的时间，或者在添加内容后调用您的功能。

jQuery是异步工作的，所以当你使用.html（）并在之后使用你的选择器时，很可能（因为 - 几乎可以保证）html代码还没有到达DOM。在使用选择器之前，您可以使用.promise()确保.html（）函数已完成。

Answer 2

您可以在“创建”时间将特定类应用于选择 另请注意，您不需要搜索$("#multiple-select")的DOM，而是使用chaining：

$("<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;
}

DEMO

Answer 3

解决！在<select>元素上定义宽度似乎可以解决问题。奇怪的是，只有在multipleSelect()元素上调用<select>时才会出现错误，该元素包含在display: none设置的块级元素中...

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

感谢大家的投入。