javascript - 防止AJAX表单提交两次？

Question

我不明白为什么这个 AJAX 表单要处理并发送电子邮件两次。您可以看到代码中是否存在某种明显的问题导致发生这种情况？

HTML

<form class="submit-form" method="post">
<input type="url" class="content-link" name="content_link" placeholder="Link" />
<input type="email" class="email" name="email" placeholder="Your Email Address" />
<button class="submit-modal-button submit-button"><span>Send<span class="ss-icon">send</span></span></button>
<p class="terms">By clicking Submit you agree to our&nbsp;<a href="<?php echo home_url('terms-of-use'); ?>">Terms & Conditions</a></p>
</form>

JavaScript

    processSubmitModal : function () {
    var form = $('.submit-form'),
        content_link = $('.submit-form input[type="url"]'),
        email = $('.submit-form input[type="email"]'),
        viewport_size = $(window).width() + "x" + $(window).height(),
        user_browser = BrowserDetect.browser,
        user_os = BrowserDetect.OS,
        current_page = document.location.href;

    $('.submit-form input[type="url"],.submit-form input[type="email"]').blur(function () {
        if ($.trim($(this).val()) == '') {
            $(this).addClass('form-validation-error');
            return false;
        } else {
            $(this).removeClass('form-validation-error');
        }
    });

    form.submit(function () {
        if ($.trim(content_link.val()) == '' && $.trim(email.val()) == '') {
            content_link.addClass('form-validation-error');
            email.addClass('form-validation-error');
            return false;
        }
        else if ($.trim(content_link.val()) == '') {
            content_link.addClass('form-validation-error');
            return false;
        }
        else if ($.trim(email.val()) == '') {
            email.addClass('form-validation-error');
            return false;
        } else {
            var env = TTB.getEnvironment();

            $('.submit-modal-button').attr('disabled','disabled');
            $(document).ajaxStart(function () {
                $('.submit-modal .screen-1').delay(300).append('<span class="loading2"></span>');
            });
            $.ajax({
                url: env.submit_modal_process,                      
                type: 'POST',
                data: {
                    content_link: content_link.val(),
                    email: email.val(),
                    viewportsize: viewport_size,
                    browser: user_browser,
                    os: user_os,
                    current_page: current_page
                }, 
                success: function () {
                    $('.submit-modal .screen-1').delay(1000).fadeOut(300, function () { 
                        $('.submit-modal .screen-1').fadeOut(500, function () {
                            $('span.loading2').detach();

                            $('.submit-modal .screen-2').fadeIn(500, function () {
                                $('.submit-modal .screen-2').append('<img class="carlton" src=' + env.the_environment + TTB.config.image_path() + 'submit-modal-success.gif' + ' />');  
                            });

                            $('.submit-modal .screen-2').css('display','block').delay(4200).fadeOut(500, function () {
                                $('.carlton').hide();
                                $('.submit-modal .screen-1').fadeIn(500);   
                                content_link.val('');
                                email.val('');
                                content_link.focus();
                                email.removeClass('form-validation-error');
                                $('.submit-modal-button').removeAttr('disabled');
                            });
                        }); 
                    });                  
                }
            });
        return false;
        }
    });
}
   EXAMPLE.processSubmitModal();

Answer 1

如果从您的代码片段中删除所有与问题代码无关的内容，我们将得到以下结果:

HTML

<form class="submit-form" method="post">
    <input type="url" name="content_link" />
    <input type="email" name="email" />
    <button>Send</button>
</form>

JavaScript

$(function() {
    var EXAMPLE = {
        processSubmitModal : function () {
            var form = $('.submit-form'),
                content_link = $('.submit-form input[type="url"]'),
                email = $('.submit-form input[type="email"]');

            form.submit(function () {
                $.ajax({
                    url: document.location.href,
                    type: 'POST',
                    data: {
                        content_link: content_link.val(),
                        email: email.val()
                    },
                    success: function () { // <-- The function that is executed twice
                        // Do something
                    }
                });
                return false;
            });
        }
    };
    EXAMPLE.processSubmitModal();

    // And somewhere in the code that was not presented in snippet...
    EXAMPLE.processSubmitModal();
});

我研究了你的代码片段，它总是只执行一次 AJAX 调用并处理 email 一次，除了唯一的情况 - 当你在代码中的某个位置调用 EXAMPLE.processSubmitModal() 再次。搜索你的代码，我几乎可以肯定这就是原因。请注意，每次调用 EXAMPLE.processSubmitModal() 时，都会添加另一个处理程序到表单的 submit 事件，而不是覆盖它。