javascript - jQuery load() 错误

Question

$('form.comment_form').submit(function(e) {
    e.preventDefault();
    var $form = $(this);
    $.ajax({
        url : 'inc/process-form.php',
        type: 'POST',
        cache: true,
        data:({
            comment      : $form.find('input[name="comment"]').val(),
            pid          : $form.find('input[name="pid"]').val(),
            post_author  : $form.find('input[name="post_author"]').val(),
            date_comment : $form.find('input[name="date_comment"]').val()
        }),
        success : function(results) {
            $('.show-results').html(results).slideToggle().delay(2000).slideToggle();
            $form[0].reset();
            $('#all-post').load('home.php #all-post li');       
        }
    });
    return false;
});

上面的代码是我的“jQuery+AJAX”评论表单。当我提交评论表单时，它工作正常，但是当我在一秒钟内再次提交它时，它会重新加载页面。

Answer 1

您可以使用unbind方法停止再次提交表单。

以下是示例代码:

var $form = $('form');
$form.bind('submit', function(e){
    e.preventDefault();
    ...
    $.ajax({
        ...
        success: function(){
            ...
            $form.unbind('submit').trigger('submit');
        }
    });
});

或者您可以以其他方式使用它通过使用 $(document).on("submit", "form", function() { });

示例代码:

$(document).ready(function () {
   $(document).on("submit", "form", function() {
        $('#content').fadeOut(100, function () {
            $(this).html('
                <img src="//mywebsite.com/spinner.gif"/>
                <div style="display:inline;color:#1FAEFF">Loading...</div>
           ').fadeIn(100);
        });
        $.get('submit.server', $(this).serialize(), function (data) {
            $('#content').html(data);
        });
        return false;
    });
});