jquery - jquery .after 在这种情况下应该如何工作？

Question

我不知道我是否错误地使用了 .after，但我的理解是它应该在我指定的元素之后显示元素？ - Option1 选择后的 hello world 选择框？

<select id="cselect" >
<option value="Option 1">Option 1</option>

</select>

$('#cselect').chosen();

var test = '<select id="dselect" ><option>Hello World</option></select>';  

$('#cselect').after(test);

$('#dselect').chosen();

在这里摆弄 - http://jsfiddle.net/jHvmg/4/

我错过了什么？ TIA

Answer 1

这与所选插件有关。当您第一次在第一个 select 上调用 chosen 时，您最终会得到以下结果(伪代码):

<select id="select1"></select>
<div id="chosenForSelect1"></div>

附加新的选择后，您将得到以下内容:

<select id="select1"></select>
<select id="select2"></select>
<div id="chosenForSelect1"></div>

然后在第二个 select 上调用 .chosen() 并最终得到以下结果:

<select id="select1"></select>
<select id="select2"></select>
<div id="chosenForSelect2"></div>
<div id="chosenForSelect1"></div>

因此，实际的 select 元素是在第一个元素之后添加的，但支持所选插件的 div 却出现了问题。最好将新的 select 附加到容器，为每个 select 添加一个容器，或者附加在所选插件的 html 之后。