Cant .ajax() submit a php form that has been loaded onto main page with jQuery .load()

Question

I'm having the following problem. Below is an explanation of what my PHP pages are and how they work. When I access form.php directly and try to submit it via AJAX, it works perfectly.

Problem - When I .load() form.php into main.php, none of the jQuery code within form.php fires. (verified through firebug) No submits, no alerts, nothing. How can I get the jQuery code within form.php to work when its loaded into main.php?

main.php -> This is the main PHP page which has a link on it. Once this link is clicked, the following jQuery code fires to load "form.php" within a div called #formcontainer. This is the code within main.php that loads form.php.

<a href="#" id="addHomeProfile">Foobar</a>
<div class="formcontainer"></div>
<script type="text/javascript">
$(document).ready(function(){
   $("#addHomeProfile").click(function(){
      $(".formcontaineropen").load("form.php");
   });
});
</script>

form.php -> this is a form that gets loaded above. It submits data to MySQL through an jQuery .ajax() POST. Here is the jquery code which submits the form, which has an ID called #homeprofile.

<form id="homeprofile"> <input type="text" name="name" id="name" /> 
<input type="submit" value="submit" id="submit"></form>

<script type = "text/javascript">
$(document).ready(function() {
    $('#homeprofile').submit(function(e){
        e.preventDefault(); 
        alert("form submitted");
        $.ajax({ // Starter Ajax Call
           type: "POST",        
           url: 'update.php', 
           data: $('#homeprofile').serialize(),
        });
    });
});

Answer 1

Use on() for this like,

$(document).on('submit','#homeprofile',function(e){
    e.preventDefault(); 
    alert("form submitted");
    $.ajax({ // Starter Ajax Call
       type: "POST", 
       url: 'update.php', 
       data: $('#homeprofile').serialize(),
   });
   return false;
});