slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 3192
Теги: 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 не привязывалось к нему.

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

demo

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

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

     


Защитный код
Обновить

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

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

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

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

IHC

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

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

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

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

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

Теги:

css, html, javascript, php, веб

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

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

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

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

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

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

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

Теги:

javascript, img, jQuery

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

Последнее с форума

ZOMRO аватар
А Вы знали, что на нашем сайте есть блог, где собраны статьи с интересной и, главное, полезной инфор...
Перейти в тему
ZOMRO аватар
Друзья, на нашем сайте доступен сервис, который предназначен для того, чтобы Вы могли проверить “вид...
Перейти в тему
ZOMRO аватар
Бесплатный тестовый период виртуального хостинга на 10 дней Мы гарантируем высокую стабильность и п...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.