title: jQuery on('submit') not working with form created through document.createElement
body: <p>Can someone explain why <code>$('body').on('submit')</code> is not working for dynamically created form? The event is bind after the form has been created and appended to <code>body</code> so I was expecting that <code>form_handler</code> should kick in but it didn't.</p>
  
  <pre><code>form_handler = function(){
      alert('ok');
  }
  
  function create_form(){
      var f = document.createElement('form');
      f.method = 'POST';
      f.action = '/echo/html/';
      f.className = 'test_form';
      document.body.appendChild(f);
      return f;
  }
  
  $(document).ready(function(){
      var form = create_form();
      $('body').on('submit', 'form.test_form', form_handler);
      form.submit();
  });
  </code></pre>
  
  <p>Here is the jsfiddle <a href="http://jsfiddle.net/7seedj0j/" rel="nofollow">link</a>. Forgive me if I am making an obvious mistake.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I can not use <code>jQuery submit</code> method as suggested by <code>@Vohuman</code>. The problem is that the third party library is creating a dynamic form and submitting it. And I am using jQuery to catch that.</p>