表单不会在.submit()上触发ajaxStart,但它会在.click()上触发

时间:2016-05-17 20:20:18

标签: javascript jquery

HTML

<form action="database/contact-form.php" id="contact-form" method="post" name="contact-form">
    <input name="name" placeholder="What is your name?" type="text"> <input name="email" placeholder="Your Email?" type="email"> 
    <textarea name="message" placeholder="Tell us about your project."></textarea> 
    <input class="contact-form-btn" name="contact-form-btn" type="submit" value="Send">
    <div class="form-preloader"></div>
    <div class="form-sent"></div>
</form>

CSS

.contact-form-btn {
    background-color: #292929;
    border: 0 none;
    border-radius: 0;
    top: 185px;
    right: 0;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    height: 36px;
    position: absolute;
    width: 18%;
    cursor: pointer;
}

.form-preloader {
    background: #11999e url(../images/preloader.gif) no-repeat scroll center center;
    border: 0 none;
    border-radius: 0;
    top: 185px;
    right: 0;
    color: #fff;
    display: none;
    font-weight: 500;
    height: 36px;
    position: absolute;
    width: 18%;
    cursor: pointer;
}

.form-sent {
    background: #292929 url(../images/check.svg) no-repeat scroll center center;
    background-color: #292929;
    border: 0 none;
    border-radius: 0;
    top: 185px;
    right: 0;
    color: #fff;
    display: none;
    font-weight: 500;
    height: 36px;
    position: absolute;
    width: 18%;
    cursor: pointer;
}

的jQuery

$('form').submit(function() {
    $(document).off(".firstCall");
    $(document).on("ajaxStart.secondCall", function() {
        $('.form-preloader').addClass('show-preloader');
    });
    $(document).on("ajaxStop.secondCall", function() {
        $("#contact-form")[0].reset();
        $('.form-preloader').removeClass('show-preloader');
        $('.form-sent').addClass('show-preloader');
    });
    $.get("/", function() {});
}); 

我在这里有点困惑。

我如何才能使<div class="form-preloader"></div>ajaxStart上提交表单时显示,.click()正在处理,但我必须将其更改为.submit()。仅在<div class="form-sent"></div>上提交表单时显示ajaxStop

0 个答案:

没有答案