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

100

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

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

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

BenM
источник
«Я думал, что использование .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
4

Вы должны знать, что функция глубокого клонирования была добавлена ​​в версию jQuery 1.5.

Дополнительная информация по этой теме:

http://api.jquery.com/clone/

Гедрюс Вичкус
источник