ajax后刷新页面，当它不应该

Question

我有一个使用jQuery发布答案grader.php脚本，它完美的作品。根据结果​​，它会带来一个表单，以便他们可以通过联系信息发送消息。当我尝试发布到第二个脚本来处理邮件程序时，整个页面将刷新而不会发布数据或返回相应的消息。事实证明，这个电话根本没有被提出。如果你想看到staging site欢迎来看看。对于我来说，用jquery让自己的脚变得湿润，这是一种低俗的方式。但是，我相信嫌疑人的脚本在这里。

我向点击事件添加了一个警报，看看它是否触发点击按钮。没有警报触发器，我得到的只是刷新页面。

另外，是否有任何方式日志帖子和控制台数据，看看到底发生了什么？

HTML：

<div id="result"> 
    <form id="info" method="post" action=""> 
    <input name="phone_number" placeholder="phone number" type="text" size="20" value=""> 
    <input name="email_address" placeholder="email address" type="text" size="30" value=""> 
    <textarea cols="50" rows="10" placeholder="Questions? Comments?" name="comments"></textarea> 
    <input type="submit" id="score" name="score" value="Send"> 
    </form>'; 
</div> 

的Jquery：

$("#score").click(function(event){ 
    alert("clicked"); 
    event.preventDefault ? event.preventDefault() : event.returnValue = false; 
    var info = $("#info").serialize(); 
    $('#result').fadeOut().html(""); 
    $.post('paider.php', info, function(data , status){ 
     $('#result').fadeIn().html(data); 
     alert(status); 
    }); 
}); 

Answer 1

我觉得这里有2个问题。

问题1： 由于表单驻留在#result中，将＃result的html设置为“”可在序列化之前有效地清空表单？你有没有尝试过？

$("#score").click(function(event){ 
    var info = $("#info").serialize(); 
    $('#result').fadeOut().html(""); 
    event.preventDefault ? event.preventDefault() : event.returnValue = false; 
    $.post('paider.php', info, function(data , status){ 
     $('#result').fadeIn().html(data); 
    }); 
}); 

问题2： 好了，所以我看了一下你的临时网站，并想我已经找到了问题。您首先获得与此主题相关的表单相似的表单，然后您将该表单替换为包含现在“#score”元素的新表单（输入类型='submit'）。

您正在将文档加载应用您的jquery事件处理程序，但当时#score元素尚不存在于DOM中，因为您尚未加载它。

你相信你正在运行在$脚本（“＃分数”）。单击但事实上页面只需使用一种形式的默认行为没有动作和一个提交按钮。

要解决此问题，您需要在无论是在DOM树中的更高层次应用的事件处理，你可以做一些简单的方法只是为了测试是否是这个问题

请您先＃试试这个submitbuttonclick处理

$("#submitButton").click(function(event){ 
    event.preventDefault ? event.preventDefault() : event.returnValue = false; 
    var formdata = $('form').serialize(); 
    $.post('grader.php', formdata, function(data , status){ 
     $('ul').css('display', 'none'); 
     $('#result').fadeIn().html(data); 
     //Here add the handler for #score click 
     $("#score").off("click").on("click", function(event){ 
      //Insert code snippet shared above here 
     }); 
    }); 
}); 

这将完成被绑定在#score click事件已经写入了DOM后提交按钮。如果脚本不止一次执行，我们不希望处理程序多次触发，这就是为什么我们首先调用“关闭”的原因。

希望这会有所帮助。