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


100

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

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

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


«Я думал, что использование .on () должно было сохранить привязку для элементов, которые существуют сейчас или в будущем?» - Это не имеет никакого отношения к .clone; это логика делегирования событий jQuery и работает, если вы передаете дополнительный селектор в .on.
pimvdb 03

Ответы:


213

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

$element.clone(true, true);

clone ([withDataAndEvents] [, deepWithDataAndEvents])

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

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


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

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

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

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

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


20
Никогда не знал .clone()общепринятых аргументов. FML. Спасибо за вашу помощь.
BenM 03

1
@DidierGhys Спасибо, я боролся с тем, чтобы .clone()не клонировать .data()(как data-xxxx="somedata"и данные в DOM) .. Это тоже исправляет!
Ричард де Вит,

Я задал этот вопрос , но мне никто не ответил. Вы можете помочь мне?
Али Солтани

Отлично, мне нужно было создать clickсобытие, чтобы добавить новый клонированный div. readyне работал
csandreas1

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.