Question

我有问题在另一个完成后运行功能。我在这篇文章中尝试回调，但这不起作用Execute jquery function after another function completes所以也许我做错了或者我的情况更复杂。

所以当我提交表单

时，我有运行的功能

$("#search-form").submit(ajaxSubmit(addSearchfuntion)); // addSearchfuntion is callback

function ajaxSubmit(callback) {
    var $form = $(this);
    var settings = {
        data: $(this).serialize(),
        url: $(this).attr("action"),
        type: $(this).attr("method")
    };

    $.ajax(settings).done(function(result) {
        var $targetElement = $($form.data("ajax-target"));
        var $newContent = $(result);
        $($targetElement).replaceWith($newContent);
        $newContent.effect("slide");
    });

    callback();

    return false;
};

在此之后，当我将新表单添加到我的页面时，我想运行另一个将处理这个新表单的函数。

 function addSearchfuntion(){
     $('.Amount').change(updateQuantity);
 }

那么如何解决这个案子？

Answer 1

您需要使用匿名函数来绑定submit事件处理程序。截至目前，您正在执行ajaxSubmit()方法并将其返回值（即false）绑定为事件处理程序。

$("#search-form").submit(function(){
    ajaxSubmit.bind(this)(addSearchfuntion);
});

并在callback

的done()回调方法中调用$.ajax()方法

$.ajax(settings).done(function(result) {
    // Your existing code
    ....
    ....
    // call the callback
    callback();
});

Answer 2

你非常接近，你需要将回调调用放在异步的方法

中

function ajaxSubmit(callback) {
    // this will be executed linear
    var $form = $(this);
    var settings = {
        data: $(this).serialize(),
        url: $(this).attr("action"),
        type: $(this).attr("method")
    };

    // this will be executed async
    $.ajax(settings).done(function(result) {

        // anything in here must be handled async, hence put your callback here

        var $targetElement = $($form.data("ajax-target"));
        var $newContent = $(result);
        $($targetElement).replaceWith($newContent);
        $newContent.effect("slide");

        // call the callback
        callback();
    });

    // this will be executed linear and most likely before the async method
    return false;
};

Answer 3

只需在ajaxSubmit中返回功能：

function ajaxSubmit(callback) {
  return function(){
  var $form = $(this);
  var settings = {
    data: $(this).serialize(),
    url: $(this).attr("action"),
    type: $(this).attr("method")
  };

  $.ajax(settings).done(function(result) {
    var $targetElement = $($form.data("ajax-target"));
    var $newContent = $(result);
    $($targetElement).replaceWith($newContent);
    $newContent.effect("slide");
  });

  callback();

  return false;
}
};

Answer 4

将callback执行放入ajax(settings).done部分。它看起来像这样：

$.ajax(settings).done(function(result) {
    var $targetElement = $($form.data("ajax-target"));
    var $newContent = $(result);
    $($targetElement).replaceWith($newContent);
    $newContent.effect("slide");

    if (typeof callback === "function") {
        callback();
    }
});

在调用之前，您还应检查以确保callback存在，这是if (typeof callback)...检查背后的想法。 See this answer了解更多信息。

如何在另一个完成后运行函数

4 个答案: