0

Как обратиться к элементу, который был добавлен в DOM через ajax, с помощью чистого js? Везде нахожу только решение для jQuery через метод .on

7
  • Через .on разве не событие на родителя неизменяемого вешают таким образом? На чистом js аналогично следует поступать.
    – Visman
    Commented 26 дек. 2017 в 10:48
  • document.getElementById - если элемент в DOM, он будет возвращаться, неважно был ли он там всегда или недавно добавился Commented 26 дек. 2017 в 11:04
  • @EugeneBartosh а querySelector не работает таким образом? Использую именно его и ничего не находит
    – user207603
    Commented 26 дек. 2017 в 11:31
  • метод on это ивентхэндлеры, при чем тут вообще querySelector ? покажите свой код Commented 26 дек. 2017 в 12:00
  • Приведите пример, наглядно демонстрирующий проблему. То, что вы добавляете в Ajax и что хотите найти (нужен код в вопросе). jQuery - всего лишь библиотека JavaScript, облегчающая работу с ним. В таком виде на ваш вопрос нельзя дать однозначный объективный ответ. Commented 26 дек. 2017 в 12:15

1 ответ 1

3

Кода от вас не дождался, но вопрос в принципе я понял. Написал сырой код, чтобы показать пример того, что вы хотите. Есть две функции, которые висят на кликах кнопок:

  • Функция addElementToDOM - имитация работы ajax, проще говоря, это просто добавление нового элемента в DOM, которого не было. Кнопка, которая лежит в документе под названием Добавление элемента, которого не было
  • Функция addEventListenerH1 - это функция, которая добавит слушателя addEventListener к нужному элементу (в нашем случае это h1). Кнопка, которая лежит в документе под названием Добавить слушателя элементу, которого не было

Теперь по шагам рассмотрим код детальнее, что он делает и для чего.

  1. Просто запустим наш проект, у нас будет две кнопки и один скрытый блок div.
  2. Имитация работы ajax. То есть мы добавим в наш документ новый элемент h1, которого не было ранее (типо ajax, но не ajax вовсе, главное смысл).
  3. Добавим слушателя клика для 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>

4
  • Спасибо за подробный ответ. Странно тогда почему у меня возвращался undefined. Когда вернусь к той задаче и найду ответ, отпишусь сюда
    – user207603
    Commented 26 дек. 2017 в 16:05
  • Denis Bubnov глянь мой вопрос подобный и подробный ru.stackoverflow.com/questions/780967/…
    – Air
    Commented 6 февр. 2018 в 9:26
  • @Air глянул. Оберни код в main.js в код: document.addEventListener("DOMContentLoaded", function() {, чтобы код выполнялся после готовности страницы. Есть еще совет вместо const, уж лучше let (я-то понимаю, что const аналогично let в плане внутренних свойств константы и про неизменяемость самой константы тоже в курсе). Не могу уделить достаточного временм на твой вопрос, вот написал свои первые мысли, сейчас занят просто. Commented 6 февр. 2018 в 9:45
  • Уже оборачивал... Но результат тот же...
    – Air
    Commented 6 февр. 2018 в 10:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.