Клонировать HTML-элемент, включая связанные с ним обработчики

Question

Можем ли мы скопировать / клонировать раздел HTML, включающий все обработчики событий, прикрепленные к нему?

Для упрощения концепции предположим, что у меня есть <div>, который вызывает alert()щелчок мышью.Я хотел бы продублировать этот <div>, а также обработчик, связанный с ним;таким образом, при клике дублированный <div> также должен вызвать предупреждение.Я мог бы скопировать хорошо, но обработчики, кажется, не дублируются правильно.Вот пример jsFiddle .

Спасибо.

Answer 1

Просто укажите true в аргументе .clone(), как указано в документации:

.clone ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEventsA Логическое значение, указывающее, следует ли копировать обработчики событий и данные вместе с элементами. Значением по умолчанию является false. * В jQuery 1.5.0 значение по умолчанию было неверно true; оно было изменено обратно на false в 1.5.1 и выше.

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

Посмотреть результаты: http://jsfiddle.net/FdugW/

Код выглядит следующим образом:

$(function() {
    $(".clickme").click(function() { alert("I am clicked!"); });

    $("a").click(function() {
        $("#clickme-1").clone(true).attr("id", "").appendTo("#container");
    });
});

Answer 2

Попробуйте:

$('div').clone(true).appendTo(document.body);

Answer 3

Используйте .clone(true) вместо .clone().

---

$(function() {
    $(".clickme").click(function() { alert("I am clicked!"); });

    $("a").click(function() {
        $("#clickme-1").clone(true).attr("id", "").appendTo("#container");
    });
});

http://jsfiddle.net/KHbuh/1/

---

Это также клонирует все связанные данные jQuery, включая обработчики.