Jquery. После клонирования элемента на него не срабатывает событие. Почему?

Question

[Дмитрий Петрик]

Есть примерно такой код.

var el = $( '.element' ).clone();
$( el ).appendTo( 'div' );

$('.element').on('dblclick', function(){
    alert();
});

Проблема в том, что если дважды кликнуть на старый элемент, алерт выскочит, а двойной клик по склонированному элементу алерт не вызывает. Часто сталкиваюсь с тем, что динамически созданные элементы вот так вот не отвечают на события. Как с этим грамотно бороться?

Answer 1

[Роман]

Вы присвоили ивент слушатель объекту в момент создания страницы. при клонировании слушатель уже не слушает :), поэтому его необходимо вешать на родительский контейнер:

$('#parent').on('dblclick', '.element', function(){
    alert();
});

И будет вам счастье

з.ы. почитайте о таком понятии как bubbling

з.ы.ы. для лучшего понимания основ джейквири пройдитесь по короткому курсу - try.jquery.com

Comments

[Александр Зонов]

Вы написали замечательный ответ, но его можно сделать еще лучше, сделав самую малость. Нужно убрать самое первое предложение. Из ответ исчезнет наезд и упрек, его будет психологически проще воспринять. Это пойдет на пользу сообществу.

[Роман]

Александр Зонов: прям перед отходом ко сну на совесть надавили :)

[Александр Зонов]

Роман: я не специально, просто последние несколько дней подробно читаю тостер и несколько огорчен тем, насколько здесь много «ответов» в которых кроме наездов ничего нет. На stackexchange.com совсем иная атмосфера. Решил не стоять в стороне, когда такой хороший ответ пропадает :)

Answer 2

[Finnish]

Роман прав, делегирование событий - наиболее правильный способ.
Если же у Вас есть какие-то ограничения на использование этого метода, посмотрите на аргументы $.fn.clone() - вы можете клонировать элемент вместе со всеми слушателями.

Answer 3

[Андрей Бойченко]

$(document).on('dblclick', '.element', function(){
    alert();
});