Jquery Cookbook 模态按钮

Question

我已经在这两天了，似乎无法理解。基本上，我从头开始使用 JQuery Cookbook 模式。我的问题是表单 html 页面加载正常，但代码无法识别我的提交按钮。以下是代码的相关部分：

单独的 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>

下面是模态代码的相关部分：

// 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() 是一种异步方法，这意味着您尝试在接收新内容之前将点击事件附加到$('#register') 元素。您需要使用$('#register').live('click', function() {}) 或将附加点击处理程序的代码移动到您的showModal 函数中。