Question

我想克隆一个JQM无线电选项并在最后插入它。问题是clone()不会复制所有嵌套元素（动态生成）。它只复制了第一批孩子而不是所有后代。生成的radio选项内容包含具有后代元素的label元素，但由于某种原因它们不会克隆。

Answer 1

.clone()并未截断您的选择，您是:)。当你这样做时：

new_option.find('label').text('Red');

您正在覆盖label元素的HTML结构，如下所示：

<label for="sky-color-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c">
    <span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last">
        <span class="ui-btn-text">Green</span>
        <span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span>
    </span>
</label>

在您使用.text()函数后，它看起来像这样：

<label for="sky-color-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c">Red</label>

修复方法是定位.ui-btn-text元素并更改其文本：

new_option.find('.ui-btn-text').text('Red');

以下是JSFiddle的更新版本：http://jsfiddle.net/aSKBW/13/

不要觉得太糟糕，这在习惯jQuery Mobile时是一个非常常见的错误，以及它如何为DOM添加如此多的结构。

Answer 2

您可以像以前一样插入普通输入和标签：

$('<input type="radio" name="sky-color" value="red" id="sky-color-' + index + '" class="custom" />    <label for="sky-color-' + index + '">Red</label>');

然后触发顶部div上的create事件

$('#slide21').trigger('create');

因为你最后追加，你必须从以前的标签中删除一些类：

last.find('label').removeClass('ui-corner-bottom ui-controlgroup-last');

您可以在此处找到您的小提琴更新：http://jsfiddle.net/aSKBW/16/

Answer 3

难道你不需要将'true'传递给深拷贝吗？：

.clone(true)

创建匹配元素集的深层副本。

.clone（withDataAndEvents）版本已添加：1.0 withDataAndEvents：一个布尔值，指示事件处理程序是否应该   与元素一起复制。从jQuery 1.4开始，元素数据将会   也被复制。

.clone（withDataAndEvents deepWithDataAndEvents）版本已添加：1.5 withDataAndEvents：一个布尔值，指示事件处理程序是否   和数据应与元素一起复制。默认值   是假的。 *对于1.5.0，默认值不正确。这将   在1.5.1以及更高版本中被改回假。

deepWithDataAndEvents ：一个布尔值，指示克隆元素的所有子元素的事件处理程序和数据是否应该是   复制。默认情况下，它的值与第一个参数的值匹配（其中   默认为false）。

Answer 4

我能够在这里克隆它，看一看。您最终会得到完全相同的值和ID，这可能是一个问题，但它确实有效。 http://jsfiddle.net/aSKBW/9/

克隆有2个选项.clone（[withDataAndEvents] [，deepWithDataAndEvents]）

$(document).ready(function(){
    $('.add-option').click(function(e){
        $('.ui-radio:eq(0)').clone(true, true).appendTo('.ui-controlgroup-controls');
        $('.ui-radio:eq(1)').clone(true, true).appendTo('.ui-controlgroup-controls');
    });
});

Answer 5

此类事情的常见解决方案是序列化您的对象，然后将其反序列化为新对象。

根据您使用的库或框架，您可能具有内置的功能，允许您执行此操作。

我使用knockoutjs，它允许你通过ko.toJSON实用程序函数执行此操作，该函数将对象转换为JSON字符串。

我还没有看到任何能够正确处理任何对象的序列化和反序列化的通用解决方案，无论多么复杂，如果某人有其中一个，请在此处发布它对很多人都有用。

Jquery克隆对象，包含所有嵌套元素

5 个答案: