title: bind dynamically created elements to javascript
body: <p>I have the code below to set up forms with a particular class, can anyone tell me how can I bind new instances of those forms that may be created dynamically, so that their submit event will fire?</p>
  <p>The forms are created by doing a get on newly created database items and returning a partial with the new data, then resetting just that part of the view, but the new forms are not bound to the submit event.</p>
  <pre><code>import $ from &quot;jquery&quot;;
  
  function setupDocumentDeleteForms() {
  
      var deleteDocumentForms = [].slice.call(document.getElementsByClassName('deleteDocumentForm'));
      if (deleteDocumentForms === undefined || deleteDocumentForms === null || !deleteDocumentForms.length) {
          return;
      }
  
      deleteDocumentForms.forEach(form =&gt; {
          form.onsubmit = (e) =&gt; {
              //do stuff
          }
      });
  
  }
  
  
  export default setupDocumentDeleteForms;
  </code></pre>