Imagine you have the following html site:

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

```

Submitting the form ends up in fetching html content from localhost via `XMLHttpRequest` and replacing the `body` with this content:

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

```

Sample 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);

```

In this scenario the first submit will work as expected. But after the first submit the `EventListener` does not work anymore since its not bound to the current DOM-Element.

**Whats the best approach to get a permanent `EventListener`?**