JQuery clone() не клонирует привязки событий, даже с on()

Я создал серию пользовательских событий jQuery для использования в мобильных веб-приложениях. Они отлично работают и прошли тестирование. Тем не менее, у меня возникла небольшая проблема, с которой у меня возникли проблемы с пониманием.

Я использую .clone() для нескольких элементов внутри DOM, которые содержат кнопку. Кнопка имеет некоторые связанные с ней пользовательские события (события привязаны с помощью .on()), но. К сожалению, когда я использую jQuery .clone(), привязки не сохраняются, и я должен добавить их снова.

Кто-нибудь сталкивался с этим раньше, знает ли кто-нибудь о потенциальной работе? Я думал, что использование .on() должно было сохранить привязку для элементов, которые существуют сейчас или в будущем?

Ответ 1

Я думаю, вы должны использовать эту перегрузку метода . clone():

$element.clone(true, true);

клон ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents: логическое значение, указывающее, следует ли копировать обработчики событий и данные вместе с элементами. Значение по умолчанию неверно.

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

Помните, что .on() на самом деле не связывает события с целями, а с элементом, которому вы делегируете. Поэтому, если у вас есть:

$('#container').on('click', '.button', ...);

События на самом деле привязаны к #container. Когда происходит щелчок по элементу .button, он пузырится до элемента #container. Элемент, который инициировал событие, оценивается по параметру селектора .on(), и если он соответствует, выполняется обработчик событий. Вот как работает делегирование событий.

Если вы клонируете элемент #container, вам необходимо глубоко клонировать события и данные для привязок, сделанных с помощью .on(), чтобы сохранить.

Это не было бы необходимо, если бы вы использовали .on() для родителя #container.

Ответ 1

Ответ 2