为什么选择在克隆DIV有一个错误的行为时刷新?(Why a SELECT in a cloned D

2019-08-01 14:13发布

我使用jQuery移动的.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');
}

当代码的最后部分被称为问题发生。 正确地选择节目之前,但不能正常工作,一旦选择被刷新,它开始以正确的方式工作,但用户界面是乱七八糟,因为增加了一倍,并放置作为原始元素的孩子。

我想补充的股利以下列方式,克隆按钮之前:

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

可能是什么这个问题的由来?

编辑:它看起来像这可能是jQuery Mobile的一个缺陷: 例如 。

Answer 1:

我终于找到了一个解决此问题的。 目前,可扩展项目的克隆不被jQuery Mobile的支持。

要做到这一点的唯一方法,是编辑和手动修复克隆格,删除风格围绕项目选择和隔离。

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

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

它的混乱,但它的作品。

我已经更新了在的jsfiddle例子 。 (编辑:从另一个很好的解决arschmitz上的jsfiddle )

PS。如果您使用的是已经在某个地方保存和标签在正确的位置重新追加它们。



Answer 2:

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



文章来源: Why a SELECT in a cloned DIV has a wrong behavior when refreshed?