title: Submitting a dynamically created form in jQuery
body: <p>I am trying to submit a form that I dynamically created.  I am using the .submit, but it is not working.  Here is my code</p>
  
  <pre><code>var $message = $('.message');
  
  
  
  $message.submit(function(e){
      console.log("Test");
  });
  
  
  $(document.body).on('click','.button', function(e) { 
      console.log($(this).val());
      var $input = '';
      $input = $('&lt;p&gt;Chat with '+$(this).val()+'&lt;/p&gt;');
      $input.append('&lt;div class = "chat" style="height:200px"&gt;&lt;/div&gt;');
      $input.append('&lt;form class="message"&gt;');
      $input.append('&lt;input size = "35" class="messages"&gt;');
      $input.append("&lt;br&gt;&lt;input type='submit' class='send_message' value = 'Send' /&gt;");
      $input.append('&lt;/form&gt;');
  
      $input.appendTo($("#contentWrap"));
   });
  </code></pre>
  
  <p>The code for document.body created the form.  However, when I click the submit button nothing happens.</p>
  
  <p>I also tried </p>
  
  <pre><code>$('#contentWrap').on("submit", ".message", function(e){
              console.log("Test")
  });
  </code></pre>
  
  <p>$(parent).on(event, child, function) is what most of the posts I read say to do.  However, I must be doing something else wrong.</p>
  
  <p>Here is the fill front end code in js fiddle <a href="https://jsfiddle.net/55Ln0wgu/" rel="nofollow">https://jsfiddle.net/55Ln0wgu/</a></p>