jQuery .submit()没有触发

Question

我试过，点击，生活，提交，它不适合我的邮件提交表格。这就像50%的时间--它起作用，50% --不起作用。这是我的代码：

Contact.html：

<div id="contact">
    <h2>Let keep in touch</h2>
    <form id="mail-form" name="contactform" action="send_form_email.php" method="post">
        <input class="contact-form" type="text" name="name" maxlength="50" placeholder="Name"><br>
        <input class="contact-form" type="text" name="mail" maxlength="80" placeholder="Email"><br>
        <textarea class="mail-content" name="content" maxlength="1000" cols="25" rows="6"></textarea><br><br>
        <center><input id="submit-button" type="submit" value="Send your message"></center>
    </form>
</div>
<div id='thankyou'>Thank you for contacting me. I'll reply as soon as possible.</div>

javascript文件：

$("#mail-form").submit(function (e) {
    e.preventDefault(); //STOP default action
    $.post("send_form_email.php", $("#mail-form").serialize(), function(data) {
        showThankYou();
    });
});

function showThankYou() {
    $contact = $("#contact");
    $thankyou = $("#thankyou");
    $contact.fadeOut(800, function() {
        $thankyou.fadeIn(800);
    });   
}

大多数时候，当我尝试提交时，浏览器被重定向到空白的send_form_email.php。当我按下“后退”按钮时，提交表单有时会生效。另外，我在submit和jquery函数中都添加了警告()，并且它们没有被触发。有人能解释一下为什么会发生这种情况吗?谢谢。

顺便说一下，我的网站网址是：http://dkonayuki.net/contact.html

所有的电子邮件都被正确发送了。但是浏览器(chrome)卡在了空白的php页面上。

这个问题肯定与我的页面转换有关(使用ajax)。但我不知道如何在不注释掉这些代码的情况下修复它。以下是我的过渡代码：

$("nav").on("click", "a", function(e) {
    e.preventDefault();
    pagename = this.href.substring(this.href.lastIndexOf('/') + 1);
    // great html5 stuff, change url without reloading entire page
    history.pushState(pagename, "dkonayuki", pagename);

    $mainContent
            .fadeOut(400, function() {
                // and great ajax also
                $mainContent.hide().load(pagename + " #main > *", function() {
                    $mainContent.fadeIn(800);
                    $("nav a").removeClass("current");
                    $("nav a[href='"+ pagename +"']").addClass("current");
                });
            });
    return false;
});

Answer 1

现在，我终于发现了我的问题。它是关于在动态加载后提交按钮的绑定事件。所以我在函数上使用了jquery：

    $("#main").on('click', "#submit-button", function (e) {...  }   

因为#main总是在那里，而且它不是动态加载的，所以这段代码工作得很好。

Answer 2

您正在一起使用输入按钮submit和jquery。当您单击submit按钮时，您的默认提交事件将触发。在提交函数中使用表单标记中的onsubmit="return false;"或e.preventDefault();来防止默认事件。

试一试

<form id="mail-form" onsubmit="return false;" name="contactform" action="send_form_email.php" method="post">

Answer 3

发生这种情况可能是因为DOM没有完全加载。

尝试从html中禁用按钮：

<input id="submit-button" type="submit" value="Send your message" disabled>

将jquery事件包装在里面，以便在加载DOM后触发它们：

$(document).ready(function () { 

    //Enable submit button now
    $("#submit-button").removeAttr("disabled");

    //Attach submit handler to form
    $("#mail-form").submit(function (e) {
          e.preventDefault(); //STOP default action
          $.post("send_form_email.php", $("#mail-form").serialize(), function(data) {
             showThankYou();
          });
    });
});