Как при добавлении нового элемента в div, добавить на него нужный обработчик(событие)?

Question

[Outoverlay]

Например при добавлении новой рубрики или тега в wp, сохраняется обработчик(не атрибут html).
То есть, есть меню. Если кликнуть на один из элементов этого меню - вылетел окно alert, а если добавить еще один элемент, то alert уже не вылетит, можно конечно прописать в atribut'е onclick="alert(1)", но как то не охото.
Подумав - понял, что wp возможно работает по интервалу. Так ли это? И есть ли другой способ добавить на новый элемент тот же обработчик, что стоит на уже сущ. элементах этого меню

Answer 1

[Сергей delphinpro]

Google it: Делегирование событий

Вкратце - обработчик вешается на родителя, который всегда присутствует в DOM. У событий есть свойство "всплывать". Вы кликнули по внутренней ссылке, событие сгенерировалось, потом прошло через родителя и тут вы его ловите и смотрите, кто там его инициировал.

Если вы используете библиотеку jQuery, то код получается до безобразия простым:

<div class=wrapper>
    <a href="#">bla bla 1</a>
    <a href="#">bla bla 2</a>
    <a href="#">bla bla 3</a>
</div>

$('.wrapper').on('click', 'a', function(){
    // this указывает на DOM элемент, который инициировал событие
    var text = $(this).text();
    alert(text);
});

Если вы добавите джаваскриптом еще несколько ссылок внутрь дива, то они также будут работать, как и те, что были там при загрузке страницы.

Comments

[Outoverlay]

Я не использую jQuery, но знаю как это работает, когда-то писал функцию, где как раз использовал делегирование, очень странно что вылетело из головы. Спасибо Вам большое за напоминание, а то бы рил setInterval, взял бы а через неделю-полторы, занимался бы рефакторингом.