Ответ 1
Я думаю, вы должны использовать эту перегрузку метода . clone():
$element.clone(true, true);
клон ([withDataAndEvents] [, deepWithDataAndEvents])
withDataAndEvents: логическое значение, указывающее, следует ли копировать обработчики событий и данные вместе с элементами. Значение по умолчанию неверно.
deepWithDataAndEvents: логическое значение, указывающее, следует ли копировать обработчики событий и данные для всех детей клонированного элемента. По умолчанию его значение соответствует первому аргументу (значение по умолчанию равно false).
Помните, что .on() на самом деле не связывает события с целями, а с элементом, которому вы делегируете. Поэтому, если у вас есть:
$('#container').on('click', '.button', ...);
События на самом деле привязаны к #container. Когда происходит щелчок по элементу .button, он пузырится до элемента #container. Элемент, который инициировал событие, оценивается по параметру селектора .on(), и если он соответствует, выполняется обработчик событий. Вот как работает делегирование событий.
Если вы клонируете элемент #container, вам необходимо глубоко клонировать события и данные для привязок, сделанных с помощью .on(), чтобы сохранить.
Это не было бы необходимо, если бы вы использовали .on() для родителя #container.