Как добавить обработчик события к элементу, который добавляется динамически.

0 / 5

Автор: Администратор

01.11.2015

Теги: javascript, action, event, listener, button

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

Всё чаще и чаще слышаться вопросы "Почему событие не работает на элементах, добавленных динамически?" и прочего рода.

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

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

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

Приведем простой пример:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />    
<link rel="stylesheet" href="/css/template.css" type="text/css" />
<title>Страница</title>
</head>
<body>
	<button>Добавить новый элемент</button>
	<script>
	  var button = document.querySelector("button");
	  button.addEventListener("click", function() {
	  	var div = document.createElement('div');
		div.innerHTML = "Можешь нажать на меня";
		div.addEventListener("click", action);
		document.body.appendChild(div);
	  });
	  
	  function action () {
	  	alert("Жми нежнее!");
	  }
	</script>
</body>
</html>

Важно заметить, что скрипт выполняет после загрузки кнопки button, иначе событие в строке 12 не привязывалось к нему.

Для события, добавляемого к новым элементам мы записали свою функцию для удобства понимания. Демостраницию вы можете посмотреть тут:

Добавить комментарий

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
hr@proovelab
15.00
ZOMRO
6.40
intuit89
6.00
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 12761

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Как подключить на свой сайт jQuery Просмотров 4840

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее

Ajax-форма обратной связи на JQuery Просмотров 17138

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее

Увеличение изображения при нажатии на не... Просмотров 63004