title: Register EventListener after rerender
body: <p>Imagine you have the following html site:</p>
  <pre><code>&lt;div id=&quot;body&quot;&gt;
    &lt;div&gt;
      &lt;form id=&quot;form&quot;&gt;...&lt;/form&gt;
      &lt;div&gt;Foo&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Submitting the form ends up in fetching html content from localhost via <code>XMLHttpRequest</code> and replacing the <code>body</code> with this content:</p>
  <pre><code>&lt;div&gt;
    &lt;form id=&quot;form&quot;&gt;...&lt;/form&gt;
    &lt;div&gt;Bar&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Sample JS:</p>
  <pre><code>var xhr = new XMLHttpRequest();
  var form = document.getElementById(&quot;form&quot;);
  
  xhr.addEventListener(&quot;load&quot;, function () {
    document.getElementById(&quot;body&quot;).innerHTML = xhr.responseText;
  });
  
  form.addEventListener(&quot;submit&quot;, e =&gt; {
    e.preventDefault();
    var formData = new FormData(form);
    xhr.open('POST', 'http://localhost/update');
    xhr.send(formData);
    form.reset();
  }, false);
  </code></pre>
  <p>In this scenario the first submit will work as expected. But after the first submit the <code>EventListener</code> does not work anymore since its not bound to the current DOM-Element.</p>
  <p><strong>Whats the best approach to get a permanent <code>EventListener</code>?</strong></p>