jQuery-为什么刷新后的克隆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);

这个问题的根源是什么?

编辑:看起来这可能是jQuery Mobile:example的错误.

最佳答案
我终于找到了解决此问题的方法.
目前,jQuery mobile不支持可扩展项的克隆.

唯一的方法是手动编辑和修复克隆的div,删除选中项周围的样式项并将其隔离.

我们要做的很简单,但很棘手:

>使用ui-select类浏览所有DIV
>推断嵌套的SELECT,删除无用的标签
>在ui选择DIV之前或之后添加SELECT的HTML代码
>删除用户界面选择的DIV
>追加可重复的DIV
>调用父级中的trigger(‘create’)以重新生成正确的样式.

杂乱无章,但是行得通.

我已经更新了example in JSFiddle.(编辑:从arschmitzJSFiddle的另一个很好的解决方案)

附:如果您使用的是标签,则必须将其保存在某个位置,然后将其重新添加到正确的位置.

转载注明原文:jQuery-为什么刷新后的克隆DIV中的SELECT行为错误? - 代码日志