Question

On document ready I run this code:

 jQuery(document).ready(function(){  
        jQuery('#button').click(function() {
            jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
            return false;
        });
    });

Then if I create a form like

<div id="contact_form">
  <form name="contact" method="post" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />

      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />

      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />

        <br />
      <input type="submit" name="submit" class="button" id="button" value="Send" />
    </fieldset>
  </form>
</div>

Everything works fine. However, if I mimic the behavior I want in the actual app (the form is loaded dynamically after document.ready has already been executed. The jquery #button action does not get called and the form acts as if there is no javascript and just runs a post.

jQuery('#contact_form').load("/dynamicform.php");

Is there something that has to be done to .load() in order for the ready function to be applied to it?

Answer 1

Use .live() like this:

 jQuery(document).ready(function(){  
    jQuery('#button').live('click', function() {
        jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
        return false;
    });
});

Your element isn’t there when you’re adding the handler. You need to listen for the click in all cases…this is what .live() is for, is listens up at the DOM root for the click, whereas .click() isn’t getting attached to anything because there are no elements that match the selector when you’re calling it. live() listens for clicks on matching elements later.