2

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

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

JQM 和克隆选择的奇怪行为

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

4

2 回答 2

1

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

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

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

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

这很混乱，但它有效。

我已经更新了JSFiddle 中的示例。（编辑：来自JSFiddle的arschmitz的另一个很好的解决方案）

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

于 2012-10-19T13:39:48.380 回答
0

似乎 .find() 是你的问题。使用 children() 也解决了更新 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/

于 2012-10-19T08:42:45.247 回答