Как реализовать последовательное выполнение ajax запросов?

Question

[jurma]

Добрый день. У меня есть ajax запрос, который подтягивает данные из бд по клику на элемент. Для элементов добавляют обработчик, с функцией запроса.

Вопрос: Как добавить обработчик на клик ( с функцией запроса) для элементов полученных из предыдущего запроса ?

Логика: пользователь нажимает на одну из списка организацию -> появляются вакансии -> нажимает на вакансию -> получает подробности -> ...

const hospitals = document.querySelectorAll(".hospital");
const typeOfDoctors = document.querySelector(".types_of_doctor");

for(let hospital of hospitals) {
  hospital.addEventListener("click", function() {
    getData(typeOfDoctors, `id_hospital=${hospital.id}`);
  });
}

function getData(container, data) {
  console.log(data);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', "process.php");
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if(this.readyState == 4) {
      console.log(xhr.responseText)
      container.innerHTML = xhr.responseText;
    }
  }
  xhr.send(data);
}

Answer 1

[Евгений Калибров]

Вам нужно отлавливать событие клика не на каждом элементе .hospital, а на общем родительском контейнере и в метод передавать объект события который будет содержать ссылку на конкретный нажатый элемент в свойстве event.target. Далее по условию проверять, если это элемент .hospital, то вызывать нужный метод для обработки. На JQuery, это делается через метод on:

$( ".parentEleement" ).on( "click", ".hospital", function() {
  console.log($(this));
});

В таком случае событие будет срабатывать на любой динамически вставленный элемент внутрь отслеживаемого контейнера.

Comments

[jurma]

Спасибо, разобрался!

Answer 2

[Егор Живагин]

Погуглить "js click для динамически загружаемых элементов"

Если коротко - вешать клик не на определённый элемент, а на document или body. В обработчике проверять уже, на какой именно элемент был клик.

Answer 3

[Айнур Валиев]

$( "document" ).on( "click", ".el", function() {
});