Javascript-форум - Проблема со срабатыванием события

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Проблема со срабатыванием события (https://javascript.ru/forum/misc/47743-problema-so-srabatyvaniem-sobytiya.html)

Проблема со срабатыванием события

Здравствуйте,

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<script type="text/javascript">
			window.onload = function()
			{
				$( '.test-div' ).on( 'click',
					function()
					{
						alert( 'ok' );
						var buf = $( 'div.test-div' );
						$( 'div.test-div' ).remove();
						buf.appendTo( $( document.body ) );
					}
				);
			}
		</script>
	</head>
	<body>
		<div class="test-div">Click Me</div>
	</body>
</html>

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

Этот вопрос задают каждый день....
замени

$( '.test-div' ).on( 'click',

на

$( document ).on( 'click', '.test-div', //Вместо document можно (и нужно) поставить родительский элемент

Цитата:

Сообщение от yriiarutiunian (Сообщение 315074)

Очевидно это происходит потому что элемента на котором отслеживается событие уже не существует. Так что либо перевешивать событие на новосозданный элемент, либо использовать делегирование:

$(document).on('click', '.test-div', function() {
 //код обработчика
});