为什么克隆的DIV中的SELECT在刷新时有错误的行为？

我正在使用jQuery Mobile的.clone（）函数来克隆表单中的div，因此我可以使用可重复的部分，但现在我遇到了嵌套选择的问题。
克隆div并使用新id更新嵌套选择后，在下一次’刷新’之后会发生奇怪的事情。

发生的事情很奇怪，select只是加倍并将其自身置于现有的select中，因此结果如下：

浏览器是Safari，我没有对其他浏览器进行任何测试，因为我只需要在Safari上运行此代码。

我克隆div的方法是：

var div = $.mobile.activePage.find('.repeatable').last().clone(); 

克隆，然后我更新ID：

 var newValue = pid +'-' + index; $(this).attr('id', newValue); $("label[for='"+ old +"']").attr('for', newValue); 

并且，最后，我刷新所有选择以选择正确的值.val（）被调用：

 if ($(this).data('role') === 'select') { $(this).selectmenu(); $(this).selectmenu('refresh'); } 

调用代码的最后一部分时会出现问题。 在选择正确显示但无法正常工作之前，一旦刷新了选择，它就会以正确的方式开始工作，但是UI被弄乱，因为它已被加倍并作为原始元素的子项放置。

我在克隆按钮之前按以下方式添加div：

 $('#clone_button').before(div); 

这个问题的根源是什么？

编辑：看起来这可能是jQuery Mobile的一个错误： 例子 。

Answer 1

我终于找到了解决这个问题的方法。 目前，jQuery mobile不支持可扩展项目的克隆。

执行此操作的唯一方法是手动编辑和修复克隆的div，删除选择周围的样式项并隔离它们。

我们要做的很简单，但很棘手：

• 使用类ui-select导航所有DIV
• 推断嵌套的SELECT删除无用的标签
• 在ui-select DIV之后或之前附加SELECT的HTML代码
• 删除ui-select DIV
• 附加可重复的DIV
• 在父级中调用trigger('create')以重新生成正确的样式。

这很麻烦，但它确实有效。

我在JSFiddle中更新了这个例子 。 （编辑： arschmitz在JSFiddle上的另一个好解决方案）

PS如果你正在使用标签，你必须将它们保存在某个地方，并将它们重新附加到正确的位置。

Answer 2

似乎.find（）是你的问题。 使用children（）也解决了’bug’更新的jsfiddle

 function cloneRepeatableGroup() { var div = $.mobile.activePage.find('.repeatable').last().clone(); div.children('select').each(function() { var element = $(this); var index = element.attr('id'); index++; element.attr('id', index); element.selectmenu(); element.selectmenu('refresh'); }); $('#clone_button').before(div); } $("#clone_button").click(function(){ cloneRepeatableGroup(); }); 

http://jsfiddle.net/7jGcw/2/