Jquery Cookbook Modal button

Question

I've been at this for two days and can't seem to get it. Basically, I'm using the JQuery Cookbook modal from scratch. My problem is the form html page loads fine but the code will not recognize my submit button. Here's the relevant parts of the code:

Separate HTML:

<div id="contact">
  <form action="" id="register_form" method="post">
    <p>First Name <br />
      <input type="text" id="firstname" name="firstname" /></p>
    <p>Last Name <br />
      <input type="text" id="lastname" name="lastname" /></p>
    <p>Username: <span class="micro">Must be a valid email address</span></span><br />
      <input type="text" id="username" name="username" /></p>
    <p><input type="submit" value="Register" id="register" /></p>
  </form>
</div>

Here's the relevant parts of the modal code:

// Insert modal at end of </body>.
$('body').append('<div id="modal_wrapper"><!--[if IE 6]><iframe id="modal_iframe" frameborder="0"></iframe><![endif]--><div id="modal_overlay"></div><div id="modal_window"><div id="modal_bar"><strong>Modal window</strong><a href="#" id="modal_close">Close</a></div><div id="modal_content"><div id="contact"><form><p><input id="firstname" /></p><p><input id="register" /></p></form></div></div></div>');

$('#modal_content').load('mediaKitF.html#contact'.replace('#', ' #'), '', showModal);

$("input[type=text]").focus(function(){
  // Select field contents
  this.select();
});

$('input #firstname').focus();

$('#register').click(function () {
  alert("hello there");
});

Answer 1

$('#modal_content').load() is an asynchronous method, which means that you are trying to attach your click event to the $('#register') element before receiving the new content. You need to either use $('#register').live('click', function() {}) or move the code attaching the click handler into your showModal function.