клонирование элементов формы в jQuery без переноса пользовательских данных

Question

У меня есть форма с повторяемыми наборами входов. Я хочу клонировать набор (class = 'repeatableItemInfo'), не сохраняя данные, которые вводит пользователь. Следующее делает хорошую работу из этого:

var subform = $('.repeatableItemInfo').clone(true);

    $('#addMore').click(function() {

    subform.appendTo('#itemInfo');

});

Противная морщина состоит в том, что одно из повторяемых полей формы представляет собой список «select» со связанным с ним событием «change». Приведенный выше код воспроизводит элемент «select», но не связанное с ним событие (несмотря на аргумент «true»).

Если я вставлю первую строку в функцию следующим образом:

$('#addMore').click(function() {

    var subform = $('.repeatableItemInfo').clone(true);

    subform.appendTo('#itemInfo');

});

Затем событие «изменения» переносится корректно, как и данные, введенные пользователем.

Может ли кто-нибудь помочь мне разобраться в поведении без данных?

Answer 1

Пара общих замечаний, основанных на предположениях, которые я должен был сделать из того кода, который предоставил ваш вопрос:

У вас должен быть скрытый родительский элемент, который содержит элемент с желаемыми значениями по умолчанию, который будет клонируемым элементом. Судя по внешнему виду вашего кода, вы используете селектор классов для захвата элемента для клонирования. Наличие скрытого элемента с идентификатором гарантирует, что вы клонируете правильный элемент.

$("#idOfParentTemplateElement .repeatableItemThing").clone().appendTo("#itemInfo");

Вы должны использовать jQuery.live или jQuery.on , чтобы подключить событие изменения, вместо использования атрибута onchange или jQuery.Bind. Вы можете дать вашему списку выбора класс, а затем связать элементы с этим именем класса, чтобы сделать что-то особенное.

$("#itemInfo").on("change", ".class-for-special-event-thing", specialEventThingFunction)

Answer 2

Почему бы просто не иметь чистый скрытый набор элементов для клонирования?Чтобы решить проблему с обработчиком событий, вы должны убедиться, что ваш обработчик событий использует .live таким образом, что любые новые клонированные выборки выбираются по мере их добавления.

Answer 3

Полагаю, проблема в том, что вы связываете событие изменения с после clone(). Это единственное, что я вижу, что может это объяснить (кстати, clone(true) подразумевает clone(true,true))

Итак, я не знаю, как организован ваш код, но попробуйте решить проблему путем клонирования после событий привязки. Вы также можете сделать:

var subform = null;
setTimeout(function() { subform = $('.repeatableItemInfo').clone(true); }, 0);

, который просто помещает в очередь клонирование без задержки.