jQuery 在 .html() 返回时不起作用

Question

我是 JQuery 的新手，我查了 docs.jquery，在 google 上搜索，问朋友，仍然找不到解决方案:(

我有一个 id=EMail 的 DIV。它包括一个段落 (<p>Please enter email...</p>) 和一个表单 (<form></form>)。 当访问者输入他/她的电子邮件地址以形成输入，并按下“发送”按钮时，JQuery 读取输入（电子邮件地址）并将其发送到“addEMail.php”。执行此操作时，<div id=EMail> 仅显示“<p>Please wait, blah blah</p>”并禁用表单（不是禁用、删除）。

在 addEMail.php 上，它返回两个东西；

• 如果电子邮件地址有效，则为“<p>Thank you</p>”。
• 如果无效，则为“<p>Please enter valid email address</p><form>...</form>”。

返回的html显示在<div id=EMail>中。

我的问题是，如果电子邮件地址无效，则 JQuery 无法处理返回的元素。单击按钮时，浏览器转到 addEMail.php。

为了解决这个问题，我尝试了 GET 和 POST 方法，添加了 DataType: "html"，同时检查了 localhost 和普通主机等。

谢谢

index.php中的JS；

<script type="text/javascript">
 $(document).ready(function(){
  $('.button').click( saveEMail );
 });

 function saveEMail()
 {
 var userEMail = $('form').serialize(); 
 $('#eMail').html('<p>Please wait while saving your email: </p>'.userEMail);
 $.ajax({
     type: 'POST',
     url: 'http://localhost/addEMail.php',
     dataType: 'html',
     data: userEMail,    
     success: function(result) {
     $('#eMail').html(result);
  }
 });
 return false;
 }
</script>

index.php 中的表单元素；

<div class="box" id="eMail">
   <p>Please blah blah blah</p>
   <form name="addEMail" action="http://localhost/addEMail.php" method="post">
   <input type="text" name="eMail" />
   <input class="button" type="submit" value="Send" />
   </form>
</div>

addEMail.php;

<?php

if (checkEmail($email) == FALSE) {
  echo("<p>Please enter a valid email address</p>");
  echo("<form ... </form>");  // exactly same form as above
}
else {
  echo("<p>thank you blah blah</p>");
}

?>

Answer 1

发生这种情况是因为如果在执行 ajax 后电子邮件在您的服务器脚本中无效，您将重新创建按钮并且它不再附加单击事件处理程序，因此不会调用 saveEMail 函数并且它将简单地提交表格。您可以改用live 函数：

$(document).ready(function() {
    $('.button').live('click', saveEMail);
});

这样浏览器将持续观察按钮是否被重新创建，它会自动重新附加事件处理程序。

另一种选择是在 ajax 请求的 success 回调中再次调用 $('.button').click( saveEMail );，恕我直言，这不是很好，因为它会导致重复。