为什么刷新后的克隆DIV中的SELECT会有错误的行为? [英] Why a SELECT in a cloned DIV has a wrong behavior when refreshed?

问题描述

我正在使用jQuery Mobile的.clone()函数以表格形式克隆div，因此我可以拥有可重复的部分，但是现在嵌套选择有问题.
克隆div并使用新的ID更新嵌套的选择后，在下一次刷新"之后会发生一些奇怪的事情.

I'm using the .clone() function of jQuery Mobile to clone a div in a form so I can have repeatable sections, but now I have a problem with nested selects.
Once the div is cloned and the nested selects are updated with the new id, something strange happens after the next 'refresh'.

发生的事情很奇怪，选择仅翻倍并将其放置在现有选择中，所以结果是这样的:

What happens is very strange, the select just double and place itself inside the existing select, so the result is this:

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

The browser is Safari, I've not made any test with other browser because I only need this code working on Safari.

我要克隆div的方法是:

What I do to clone the div is:

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

要克隆，然后更新ID:

to clone, then I update the IDs:

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

，最后，我刷新所有选择，以选择一次正确的值.调用val():

and, at the end, I refresh all selects to have the right value selected once .val() is called:

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

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

The problem happens when the last part of the code is called. Before the select shows correctly, but doesn't work properly, once the select is refreshed, it starts working in the right way, but the UI is messed because has been doubled and placed as child of the original element.

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

I add the div in the following way, before the clone button:

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

此问题的根源可能是什么?

What can be the origin of this problem?

看来这可能是jQuery Mobile的错误:示例.

It looks like this could be a bug of jQuery Mobile: example.

推荐答案

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

I finally found out a workaround to this problem. At the moment, clones of expandable items are not supported by jQuery mobile.

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

The only way to do this, is to edit and fix manually the cloned div, deleting style items around selects and isolating them.

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

What we've to do is pretty simple, but tricky:

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

• Navigate all DIVs with class ui-select
• Extrapolate the nested SELECT removing useless tags
• Append the HTML code of the SELECT after or before the ui-select DIV
• Remove the ui-select DIV
• Append the repeatable DIV
• Call trigger('create') in the parent to re-generate the correct style.

这很麻烦，但是可以.

我已经更新了JSFiddle中的示例. ( arschmitz 中的另一个很好的解决方案/"rel =" nofollow> JSFiddle )

I've updated the example in JSFiddle. (edit: another good solution from arschmitz on JSFiddle)

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

P.S. If you're using labels you've to save them somewhere and re-append them in the correct position.

这篇关于为什么刷新后的克隆DIV中的SELECT会有错误的行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！