Как обратиться к элементу, который был добавлен в DOM через ajax, с помощью чистого js? Везде нахожу только решение для jQuery через метод .on
1 ответ
Кода от вас не дождался, но вопрос в принципе я понял. Написал сырой код, чтобы показать пример того, что вы хотите. Есть две функции, которые висят на кликах кнопок:
- Функция
addElementToDOM
- имитация работы ajax, проще говоря, это просто добавление нового элемента в DOM, которого не было. Кнопка, которая лежит в документе под названием Добавление элемента, которого не было - Функция
addEventListenerH1
- это функция, которая добавит слушателяaddEventListener
к нужному элементу (в нашем случае этоh1
). Кнопка, которая лежит в документе под названием Добавить слушателя элементу, которого не было
Теперь по шагам рассмотрим код детальнее, что он делает и для чего.
- Просто запустим наш проект, у нас будет две кнопки и один скрытый блок
div
. - Имитация работы ajax. То есть мы добавим в наш документ новый элемент
h1
, которого не было ранее (типо ajax, но не ajax вовсе, главное смысл). - Добавим слушателя клика для
h1
. В чем смысл этого кода - черезquerySelector
получим элемент (если добавим несколько одинаковых - вернет первый), если он есть, то добавим слушателя (в противном случае упадет ошибка, так какquerySelector
ничего не вернет, для этого и проверкаif (element)
)
Код достаточно простой для понимания, никакого jQuery, просто JavaScript, смотрите:
function addEventListenerH1() {
var element = document.querySelector('h1');
if (element) {
element.addEventListener('click', function() {
document.getElementById('one').classList.remove("hidden");
var el = document.getElementsByClassName('two')
for (var index = 0; index < el.length; index++) {
el[index].classList.add("hidden");
}
});
alert('Слушатель добавлен!');
} else {
alert('Пока некого слушать! Элемента нет!');
}
}
function addElementToDOM() {
var newDiv = document.createElement("div");
newDiv.innerHTML = "<h1 class='two'>Привет!</h1>";
divOne = document.getElementById("one");
document.body.insertBefore(newDiv, divOne);
}
.hidden {
display: none;
}
<div id="one" class="hidden">One</div>
<input type="button" onclick="addElementToDOM();" value="Добавление элемента, которого не было" />
<button onclick="addEventListenerH1()">Добавить слушателя элементу, которого не было </button>
-
Спасибо за подробный ответ. Странно тогда почему у меня возвращался undefined. Когда вернусь к той задаче и найду ответ, отпишусь сюда Commented 26 дек. 2017 в 16:05
-
Denis Bubnov глянь мой вопрос подобный и подробный ru.stackoverflow.com/questions/780967/…– AirCommented 6 февр. 2018 в 9:26
-
@Air глянул. Оберни код в main.js в код:
document.addEventListener("DOMContentLoaded", function() {
, чтобы код выполнялся после готовности страницы. Есть еще совет вместоconst
, уж лучшеlet
(я-то понимаю, чтоconst
аналогичноlet
в плане внутренних свойств константы и про неизменяемость самой константы тоже в курсе). Не могу уделить достаточного временм на твой вопрос, вот написал свои первые мысли, сейчас занят просто. Commented 6 февр. 2018 в 9:45 -
.on
разве не событие на родителя неизменяемого вешают таким образом? На чистом js аналогично следует поступать.on
это ивентхэндлеры, при чем тут вообщеquerySelector
? покажите свой код