На вопрос уже ответили, но хочу еще сказать вам про
Делегирование событий: cуть в том, что бы вешать событие не на сам элемент, а на его родителя.
$('.parent').on('click', '.child', function () {
/* ваш код */
});
Как это работает?
- Кликаем по элементу
.child
- Вызывается событие
click
, на нашем child
нет обработчика
- Всплытие - событие начинает всплывать и переходит к элементу
parent
, который является родителем child
, на нем уже есть наш
обработчик. В обработчике проверяется, на какой элемент мы кликнули,
и если соответствует селектору ( child
, первый параметр в ф-ции
click
), то вызывается обработчик, в контексте child
;
Это можно организовать и на чистом js
parent.onclick = function (e) {
var target = e.target // без кроссбраузерности, только для примера
/* допустим проверяем по классу */
if(target.className == 'child') {
/* тут можно выполнить, что угодно */
}
}
Можно организовать некую обертку
function delegate(parent, child, event, func) {
var parent = document.querySelector(parent);
var childs = document.querySelectorAll(child);
parent.addEventListener(event, function (e) {
var target = e.target; // плевать на IE
if(Array.prototype.indexOf.call(childs, target) < 0)
return; // не наш элемент
func.call(e.target);
// выполнится в контексте target, можно и параметры передать
}, false);
}
Зачем?
Теперь, каким бы мыслимым и немыслимым образом вы бы не добавили элемент child
в parent
, на child
будет срабатывать обработчик. Потому что на самом деле он срабатывает на элементе parent
:)