Объект JQuery Clone со всеми вложенными элементами

Question

Я хочу клонировать опцию JQM radio и вставлять ее в конец. Проблема clone() не копирует все вложенные элементы (динамически сгенерированные). Он просто копирует первых детей не всех потомков. Сгенерированное содержимое опции радио содержит элемент метки, который также имеет элементы потомков, но по какой-то причине они не клонируются.

Вот скрипку http://jsfiddle.net/aSKBW/7/

Answer 1

.clone() не усекает ваш выбор, вы:.Когда вы сделаете это:

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

Вы перезапись HTML структуру label элемента, который выглядит следующим образом:

<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

Не просто нужно передать «истинный» глубокой копии ?:

.clone(true) 

создать глубокую копию набора соответствующих элементов.

.clone (withDataAndEvents) версия 1.0 Добавлено: withDataAndEvents: логическое значение, указывающее ли обработчики событий должны быть скопированы вместе с элементами. Начиная с jQuery 1.4, данные элемента будут также скопированы .

.clone (withDataAndEvents deepWithDataAndEvents) версия 1.5 Добавлено: withDataAndEvents: логическое значение, указывающее ли обработчики событий и данные должны быть скопированы вместе с элементами. Значение по умолчанию неверно. * Для 1.5.0 значение по умолчанию неверно. Это приведет к изменению на значение false в 1.5.1 и выше.

deepWithDataAndEvents: логическое значение, указывающее ли обработчики событий и данные для всех детей клонированного элемента должны быть скопированы . По умолчанию его значение соответствует значению первого аргумента (значение по умолчанию - false).

Answer 3

Я смог клонировать его здесь, взгляните. Вы получаете те же самые значения и идентификаторы, которые могут быть проблемой, но он работает. 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 4

Обычным решением для такого рода вещей заключается в сериализовать объект затем десериализации его в новый объект.

В зависимости от того, какие библиотеки или фреймворки вы используете, у вас могут быть встроенные функции, которые позволяют вам это делать.

Я использую knockoutjs, который позволяет это сделать с помощью утилиты ko.toJSON, которая преобразует объект в строку JSON.

Мне еще предстоит увидеть какое-либо общее решение, которое будет правильно обрабатывать сериализацию и десериализацию любого объекта независимо от того, насколько сложно, если кто-то из них, пожалуйста, разместите его здесь, это было бы полезно для многих людей.

Answer 5

Вы можете вставить нормальный вход и этикетки, как раньше:

$('<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/