title: load form with ajax and submit with jQuery
body: <p>I have struggled for quite some time now with this but can figure out whats wrong.</p>
  
  <p>I have an index file where I'm loading the contend with ajax (in this case a form stored in add_admin.php). I have a form which loads just perfectly in a div after clicking a menu item(calling the ajax function - this part works). But if I want to submit that form with jQuery afterwords using the </p>
  
  <pre><code>$(".loginform").submit(function(e) {});
  </code></pre>
  
  <p>it doesn't get called. I'm suspecting the reason is that the form was not present on the page at the time it was loaded. If I move the form directly to the index page, the function works perfectly.</p>
  
  <pre><code>$(document).ready(function () {
  $(".loginform").submit(function(e) {
    data = $("#loginform").serialize();
    password = document.getElementById("user_pass").value;
    passtosubmit=hex_sha512(password);
  
    data += "&amp;pass=" + encodeURIComponent(passtosubmit);
    password="";
  
  //$.post("modules/process/process_add_admin.php", data);
  //alert(data);return false;
  $.ajax({
    type: "POST",
        url: "/modules/process/process_add_admin.php",
    data: data,
    success: function() {
      $('#main_panel_container').html("&lt;div id='message'&gt;&lt;/div&gt;");
      $('#message').html("&lt;h2&gt;Contact Form Submitted!&lt;/h2&gt;")
      .append("&lt;p&gt;We will be in touch soon.&lt;/p&gt;")
      .hide()
      .fadeIn(1500, function() {
      $('#message').append("&lt;img id='checkmark' src='images/check.png'/&gt;");
    });
   }
  });
  return false; 
    });
  });
  </code></pre>
  
  <p>The form to submit</p>
  
  <h2>add_admin.php</h2>
  
  <pre><code>&lt;div id="contact_form"&gt;
  &lt;form name="loginform" class="loginform" id="loginform" action="#" method="post"&gt;
              &lt;label&gt;&lt;strong&gt;Username&lt;/strong&gt;&lt;/label&gt;&lt;input type="text" name="username" id="user_login"  size="28" class="input" /&gt;
              &lt;br /&gt;
              &lt;label&gt;&lt;strong&gt;Password&lt;/strong&gt;&lt;/label&gt;&lt;input type="password" name="p" id="user_pass"  size="28" class="input"/&gt;
              &lt;br /&gt;
              &lt;label&gt;&lt;strong&gt;E-mail&lt;/strong&gt;&lt;/label&gt;&lt;input type="text" name="email" id="user_email"  size="28" class="email" /&gt;
              &lt;br /&gt;
              &lt;label&gt;&lt;strong&gt;First Name&lt;/strong&gt;&lt;/label&gt;&lt;input type="text" name="fname" id="user_fname"  size="28" class="input" /&gt;
              &lt;br /&gt;  
              &lt;label&gt;&lt;strong&gt;Last Name&lt;/strong&gt;&lt;/label&gt;&lt;input type="text" name="lname" id="user_lname"  size="28" class="input" /&gt;
              &lt;br /&gt;  
              &lt;input id="save" class="addbutton" type="submit" value="Add" onclick=""/&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>can anyone please advise?</p>
  
  <p>Thanks</p>