Question

我有处理表单提交事件的功能。

我想在处理程序中做的是推迟默认行为，直到Ajax函数运行完毕。

示例代码

$("#some_form").on("submit", function(event){
    // Defer default event behavior

    // Do some ajax function with a callback function to run
    // after it is finished as an argument
    ajaxFunction(function(){
        // Do some stuff

        // Let the default event behavior that was deferred to be run
    });
});

有办法做到这一点吗？

编辑：

Ajax代码只是一个例子。我本可以这样做的

$("#some_form").on("submit", function(event){
        // Defer default event behavior

        // Do some stuff

        // Let the default event behavior that was deferred to be run
});

Answer 1

您可以使用event.preventDefault()取消表单提交。然后在ajax完成时提交表单，使用标志知道ajax是否已完成。

$("#some_form").on("submit", function(event){
    if (!$(this).data('ajax-complete')){
        event.preventDefault();
        // Defer default event behavior        
        // Do some ajax function with a callback function to run
        // after it is finished as an argument
        ajaxFunction(function(){
            // Do some stuff

            // submit the form in the ajax success function
            $("#some_form").data('ajax-complete', true).submit();
        });
    }
});

Answer 2

对于特定调用，请使用ajax对象的success属性。（http://api.jquery.com/jQuery.ajax/）

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $("#some_form").submit();
  }
});

Answer 3

在阻止（延迟）默认行为后，您可能需要使用jQuery.ajax提交表单，如：

$("#some_form").on("submit", function(event) {
    event.preventDefault();
    // do something
    console.log("do something");
    $.ajax({
        type: "POST",
    //  url : "example.php",
    }).done(function() {
        console.log("success");
    }).fail(function() {
        console.log("error");
    });
});

检查 DEMO

Jquery - 如何推迟事件的默认行为？

3 个答案: