具有所有嵌套元素的 Jquery Clone 对象

Question

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

这是 fiddle http://jsfiddle.net/aSKBW/7/

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 添加如此多的结构时非常常见的错误。