等待 Ajax 称为 DOM 的操作完成

Question

对不起这个标题，但我不知道怎么称呼它。

我得到了一些 ajax 调用函数，它成功地向页面添加了一些 HTML 元素：

function ajax_submit_append(form_data, url, result, complete) {
    $.ajax({
        url: url,
        type: 'POST',
        data: form_data,
        success: function(msg) {
              var res = $(msg).filter('span.redirect');
              if($(res).html() != null){
                  window.location.replace($(res).html()); 
                  return false;
              }
            $(result).append(msg);
        },
        complete: complete()
    });
};

函数在成功时做了一些事情，其中最重要的是 .append，然后这个 ajax 函数在某些按钮中被调用。点击函数如下所示：

$(function() {
     $("#product_list_add_btn").click(function(e){
         ajax_submit_append(
                    form_data = {
                        product_name: $('.selectpicker option:selected').val(),
                        amount: $('#amount').val()},
                        "<?php echo site_url('admin_panel/new_order/add_product'); ?>",
                        '#add_product_result',
                        calculateSum
                );
         return false; 
         });
});

我想要实现的是在通过 ajax.

完成 .append 之后调用 calculateSum 函数（求和 table 列）

现在，当我将 calculateSum 添加到 ajax complete 事件时，在使用 .append

将新行添加到 table 之前，它仍然会被调用

编辑：我向您展示了 calculateSum，但我相信那里没有任何问题。

function calculateSum() {
    var sum = 0;
    // iterate through each td based on class and add the values
        $(".countit").each(function() {

        var value = $(this).text();
        // add only if the value is number
        if(!isNaN(value) && value.length != 0) {
            sum += parseFloat(value);
        }
    });
    $('#total_price').text(sum);  
    alert("test");
};

如果非要我猜的话，我会说是点击事件吗？

如何解决这个问题？

Answer 1

尝试使用 jqXHR 的 done() 方法：

function ajax_submit_append(form_data, url, result, complete) {
    $.ajax({
        url: url,
        type: 'POST',
        data: form_data,
        success: function(msg) {
              var res = $(msg).filter('span.redirect');
              if($(res).html() != null){
                  window.location.replace($(res).html()); 
                  return false;
              }
            $(result).append(msg);
        }
    }).done(complete);
};

等待 Ajax 称为 DOM 的操作完成

Waiting for Ajax called DOM manipulation to finish

html

javascript

php

ajax

jquery