обработчик событий для динамически добавленных элементов
доброго времени суток всем, на jquery есть метод .on() который вешает обрабочик даже на динамически созданные элементы, как это сделать на чистом javascript? копал в сторону addEventListener, но почему-то не срабатывает
var modify = document.querySelectorAll('.modify');
for (var i = 0; i < mod2.length; i++) {
mod2[i].addEventListener('click', function() {
alert(1);
});
}
// правильно ли навешал обработчик на элементы с одинаковым классом ?
подумал реализовать через так: при добавлении нового элемента удалить обработчик через removeEventListener, потом снова добавить на все, но не знаю правильно ли так сделать, если нет, то как правильнее? если да, то покажите как правильно реализовать это с ремувом, благодарю заранее) |
Цитата:
<html>
<head>
</head>
<body>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<script>
var mod2 = document.querySelectorAll('.modify');
for (var i = 0; i < mod2.length; i++) {
mod2[i].addEventListener('click', function() {
alert(1);
});
}
</script>
</body>
</html>
И, кстати, при таокм раскладе лучше делать вот так
<html>
<head>
</head>
<body>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<script>
f=function(){alert(1)}
var mod2 = document.querySelectorAll('.modify');
for (var i = 0; i < mod2.length; i++) {
mod2[i].addEventListener('click', f);
}
</script>
</body>
</html>
дабы не засирать память бестолку |
Цитата:
|
Цитата:
Цитата:
кстати, за это время попробад сделать вот так для не ещё несозданных элементов:
function modify() {
alert(1);
}
function addModEvent() {
var mod = document.querySelectorAll('.modify');
for (var i = 0; i < mod.length; i++) {
mod[i].addEventListener('click', modify);
}
}
addModEvent(); // для уже сущесвующих
function removeModEvent() {
var mod = document.querySelectorAll('.modify');
for (var i = 0; i < mod.length; i++) {
mod[i].removeEventListener('click', modify);
}
}
// для ещё не созданных
parentElem.appendChild(newElem); // ну условно
removeModEvent();
addModEvent();
|
Tecvid,
Цитата:
Цитата:
|
рони,
я как раз перед этим вопросом прочитал этот урок) но либо он не подходит для моей задачи, либо я не смог адаптировать его под неё задача такая, есть один контейнер - див, в нём множество одинаковых дивов с одинаковым классом, и каждый из них имеет кнопку (див) с классом modify, без какого либо id или ещё что-то который уникален, то есть мне кажется что по любому надо перебирать в цикле, либо я что-то недопонял |
Tecvid,
подходит именно делегирование под условие вашей задачи. ставите на контейнер клик в клике определяите источник -- если источник имеет класс modify запускаите функцию |
рони,
хм понятно, спасибо большое) |
Tecvid,
для вашей задачи цикл ненужен |
рони,
тогда получается что target нужно вставить внутри handler при addEventListener?
function hasClass(elem, cls) {
// ...
return true;
}
function modify() {
var event = e || window.event;
var target = event.target || event.srcElement;
if (hasClass(target, 'modify')) {
addModEvent();
}
}
function addModEvent() {
parentElem.addEventListener('click', modify);
}
addModEvent();
так верно будет? |
| Часовой пояс GMT +3, время: 07:21. |