Question

假设您有以下html网站：

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

提交表单最终导致通过XMLHttpRequest从本地主机获取html内容，并将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的最佳方法是什么？

Answer 1

响应此功能，您将替换 body 标记中存在的所有内容，包括事件附带的 form 。

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

Answer 2

我相信问题在于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);

重新提交后注册EventListener

2 个答案: