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和普通主机等。

由于

JS in index.php;

<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后电子邮件在服务器脚本中无效，则重新创建按钮并且不再附加click事件处理程序，因此不会调用saveEMail函数它只需提交表格。您可以改为使用live功能：

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

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

另一个替代方法是在ajax请求的$('.button').click( saveEMail );回调中再次调用success，该请求恕我直言，因为它会导致重复。

jQuery在.html（）返回时不起作用

1 个答案: