title: jquery ajax upload form serialize
body: <p>I'm having some difficulties with uploading an image from an html form.
  The form is added to a div when someone clicks on an item, here's the code for that:</p>
  
  <pre><code>$("#editavatar").click(function(){
      $(".rightdisplay").html('&lt;form class="upload" method="post" enctype="multipart/form-data"&gt;');
      $(".rightdisplay").append('&lt;div class="editavatar"&gt;&lt;/div&gt;');
      $(".rightdisplay .editavatar").append('&lt;div class="boxtitle"&gt;edit avatar&lt;/div&gt;');
      $(".rightdisplay .editavatar").append('&lt;div class="boxwrapm"&gt;&lt;input type="file" name="imageup" id="imageup" value="" /&gt;&lt;/div&gt;');
      $(".rightdisplay .editavatar").append('&lt;div class="boxwrapm"&gt;&lt;input type="submit" name="submit" class="imageupload" value="Send" /&gt;&lt;/div&gt;');
      $(".rightdisplay .editavatar").append('&lt;/form&gt;');
      Cufon.replace('.boxtitle');
  });
  </code></pre>
  
  <p>The form is created properly, the problem is that when I try to serialize the form when someone clicks the submission button is that the dataString variable stays empty:</p>
  
  <pre><code>$(document).on("click", "input.imageupload", function(event){
      event.preventDefault();
      dataString = $("form.upload").serialize();
      alert(dataString);
      $.ajax({
          type: "POST",
          url: "http://xxx/upload.php",
          data: dataString,
          dataType: "json",
          success: function(json){
              if(json.jresponse==true){
                  $(".avatar").css({"background" : "url(http://xxx/images/avatars/"+json.juser+".png) #000000 center center no-repeat;"});
              }
              alert(json.jmessage);
          },
          error: function(xhr, textStatus, errorThrown){
              alert(errorThrown);
          }
      });
      return false;
  });
  </code></pre>
  
  <p>Why doesn't it serialize?</p>