javascript - ajax post在不应该刷新页面时刷新页面

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

我认为这里有两个问题。

问题 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 事件处理程序，但此时 DOM 中尚不存在 #score 元素，因为您尚未加载它。

您认为您正在 $("#score").click 中运行脚本，但实际上该页面只是使用表单的默认行为，没有任何操作和提交按钮。

要解决此问题，您需要在 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 提交按钮写入 DOM 后绑定(bind)点击事件。如果脚本执行多次，我们不希望处理程序多次触发，这就是我们首先调用“off”的原因。

希望这有帮助。