title: Detect a form submit in jQuery when it has been dynamically added to the DOM
body: <p><strong>Scenario:</strong></p>
  
  <p>I have a select box with it's data populated by data from a php config file. If there isn't a matching value in the select to choose from, I am allowing the user to add a field to it. I have created a small one input form which is added via jQuery and I want to catch the post submission to then defer it to an ajax function.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>As the form is dynamically added I am unable to catch the form submission and the page ends up reloading.</p>
  
  <p>This doesn't work:</p>
  
  <pre><code>$('form[name="add"]').on('submit', function(e) {.....
  </code></pre>
  
  <p><strong>One solution:</strong> </p>
  
  <p>If I don't use a form element and simulate it in a div I can get around by using</p>
  
  <pre><code>$(document).on('click', 'div.add_form a[name="submit"]', function() {.....
  </code></pre>
  
  <p><strong>However:</strong></p>
  
  <p>Although the solution above works I would appreciate if 1) someone could educate me if it is possible to catch a submission from a form that has been dynamically added to the page using jQuery, and 2) if it would be 'good practice' to use that method</p>
  
  <p><strong>Update</strong></p>
  
  <pre><code>$(document).on('submit', 'form[name="add"]', function(e){ 
      console.log('here')
      e.preventDefault() 
  })
  </code></pre>
  
  <p>This event delegation is <strong>NOT</strong> catching the form as I can see from the console with preserve log enabled</p>