title: A simple jQuery edit-in-place with ajax form
body: <p>In a very very simple inline edit in place, jQuery change the text to an editable form with</p>
  
  <pre><code>$(document).ready(function() {
   $(".editable").bind("dblclick", function () {
    OriginalText = $(this).html();
    $(this).html("&lt;form id='test' method='post' action='test.php'&gt;
    &lt;input type='text' class='editBox' value='" + OriginalText + "' /&gt;
    &lt;input type='submit' value='change' /&gt; &lt;/form&gt;")
   }); 
  });
  </code></pre>
  
  <p>Now this form works for change the text, but I want to make it work with ajax; with a code like</p>
  
  <pre><code>$(function(){
      $('#test').submit(function(e){
          e.preventDefault();
          var form = $(this);
          var post_url = form.attr('action');
          var post_data = form.serialize();
          $.ajax({
              type: 'POST',
              url: post_url, 
              data: post_data,
              success: function(msg) {
                  $(form).fadeOut(500, function(){
                      form.html(msg).fadeIn();
                  });
              }
          });
      });
  });
  </code></pre>
  
  <p>But when using them as separate functions, they do not work, probably because the form is itself generated by jQuery, and not part of the original html. How can I mix these two functions to generate ajax-based form?</p>