1

我想克隆一个 JQM 单选选项并将其插入到最后。问题是clone()没有复制所有嵌套元素（动态生成）。它只是复制第一个孩子而不是所有的后代。单选选项的生成内容包含标签元素，该元素也具有后代元素，但由于某种原因它们不会克隆。

这是小提琴http://jsfiddle.net/aSKBW/7/

4

5 回答 5

4

.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 添加如此多的结构时，这是一个非常常见的错误。

于 2012-04-19T22:14:56.740 回答
3

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

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

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

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

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

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

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

于 2012-04-19T22:56:31.917 回答
2

难道您不需要将“true”传递给深拷贝吗？：

.clone(true)

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

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

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

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

于 2012-04-19T22:06:14.167 回答
1

我可以在这里克隆它，看看。您最终会得到完全相同的值和 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');
    });
});​
于 2012-04-19T22:07:02.717 回答
0

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

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

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

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

于 2012-04-19T22:09:46.360 回答