Я пытаюсь понять, как привязать событие к динамически создаваемым элементам. Мне нужно, чтобы событие сохранялось в элементе даже после его уничтожения и восстановления.
Очевидно, что с живой функцией jQuery это просто, но как бы они выглядели, реализованные с помощью собственного Javascript?
Вот простой пример:
function live(eventType, elementId, cb) {
document.addEventListener(eventType, function (event) {
if (event.target.id === elementId) {
cb.call(event.target, event);
}
});
}
live("click", "test", function (event) {
alert(this.id);
});
Основная идея заключается в том, что вы хотите прикрепить обработчик событий к документу и позволить событию всплывать в DOM. Затем проверьте свойство event.target
, чтобы увидеть, соответствует ли оно требуемым критериям (в данном случае это просто id
элемента).
Редактировать:
@shabunc обнаружил довольно большую проблему с моим решением - события на дочерних элементах не будут определяться правильно. Один из способов исправить это - посмотреть на элементы-предки, чтобы увидеть, есть ли у них указанные id
:
function live (eventType, elementId, cb) {
document.addEventListener(eventType, function (event) {
var el = event.target
, found;
while (el && !(found = el.id === elementId)) {
el = el.parentElement;
}
if (found) {
cb.call(el, event);
}
});
}
В дополнение к посту Эндрю и комментарию Биньямина, возможно, это вариант:
При этом вы можете использовать «nav .item a» в качестве селектора. На основании кода Андрея.
function live (eventType, elementQuerySelector, cb) {
document.addEventListener(eventType, function (event) {
var qs = document.querySelectorAll(elementQuerySelector);
if (qs) {
var el = event.target, index = -1;
while (el && ((index = Array.prototype.indexOf.call(qs, el)) === -1)) {
el = el.parentElement;
}
if (index > -1) {
cb.call(el, event);
}
}
});
}
live('click', 'nav .aap a', function(event) { console.log(event); alert('clicked'); });