title: JQuery preventDefault() using ajax, .on, form, class and future elements
body: <p>I have a form that is created dynamically, then I need to submit it using AJAX with <code>preventDefault()</code>.</p>
  
  <p>If I use below code, it works.</p>
  
  <pre><code>$('#container').on('submit', 'form', function(event){
      event.preventDefault();
  
      $.ajax({
          type: 'POST',
          url: /myurl,
          data: $(this).serialize()
     });
  });
  </code></pre>
  
  <p>But I need to submit using a class, as below, so doing it <code>preventDefault()</code> doesn't work. Is there any workaround for this?</p>
  
  <pre><code>$('#container').on('submit', '.ajax-form', function(event){
      event.preventDefault();
  
      $.ajax({
          type: 'POST',
          url: /myurl,
          data: $(this).serialize()
     });
  });
  </code></pre>
  
  <p>A short HTML is:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;form action="/foo/bar" class="ajax-form" method="post"&gt;
          &lt;input type="text" placeholder="Name" value="" /&gt;
          &lt;input type="submit" value="Save" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>