Зарегистрировать EventListener после повторного рендеринга - PullRequest
Новая
       32

Зарегистрировать EventListener после повторного рендеринга

0 голосов
/ 16 ноября 2018

Представьте, что у вас есть следующий html-сайт: 

<div id="body">
  <div>
    <form id="form">...</form>
    <div>Foo</div>
  </div>
</div>

Отправка формы приводит к извлечению html-контента с локального хоста через XMLHttpRequest и замене body на это содержимое: 

<div>
  <form id="form">...</form>
  <div>Bar</div>
</div>

Образец JS: 

var xhr = new XMLHttpRequest();
var form = document.getElementById("form");

xhr.addEventListener("load", function () {
  document.getElementById("body").innerHTML = xhr.responseText;
});

form.addEventListener("submit", e => {
  e.preventDefault();
  var formData = new FormData(form);
  xhr.open('POST', 'http://localhost/update');
  xhr.send(formData);
  form.reset();
}, false);

В этом случае первая отправка будет работать как ожидалось.Но после первой отправки EventListener больше не работает, поскольку он не привязан к текущему DOM-элементу.

Какой лучший способ получить постоянный EventListener?

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

Я считаю, что проблема в инструкции innerHTML.

Если вы создаете элемент формы динамически, он должен работать нормально. Как это: 

//do not use this
document.getElementById("body").innerHTML = ....

//use this instead
var form = document.createElement('form');
//put your request inside a custom function
form.onsubmit = yourfunction;
document.getElementById("body").appendChild(form);
0 голосов
/ 16 ноября 2018

В ответ на эту функцию вы заменяете все, что существует в теге body , включая форму , которая есть в событии. 

xhr.addEventListener("load", function () {
  document.getElementById("body").innerHTML = xhr.responseText;
});
...