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

我正在使用 jQuery Mobile 的 .clone() 函数来克隆表单中的 div，这样我就可以拥有可重复的部分，但现在我遇到了嵌套选择的问题。
一旦 div 被克隆并且嵌套选择被新的 id 更新，下一次“刷新”后就会发生一些奇怪的事情。

发生的事情很奇怪，选择只是加倍并将其自身放置在现有选择中，所以结果是这样的：

浏览器是 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);

这个问题的根源是什么？

Edit:看起来这可能是 jQuery Mobile 的一个错误：example.

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

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

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

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

虽然很乱，但是很有效。

我已经更新了JSFiddle 中的示例。 （编辑：另一个好的解决方案来自阿施米茨 on JSFiddle)

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