多个动态表单提交后运行功能

Question

我无法让我的功能正常工作。实际上我有两个问题。 1) 有时脚本只添加例如 7 个表单中的 1 个。 2）更新页面时，我的其他函数会为每个提交的表单调用，而不仅仅是一次。

所以我有代码可以在例如用户点击按钮时创建表单。

var pp_total_change = function(){
 .. .... .
  $('.pp_count').each(function(){
  .........
     pp_total_list_items += "<li><form action='cart/add/"+$(this).attr("labelid")+"' method='post' id='form_"+$(this).attr("labelid")+"'><span>"+$(this).attr("labelname")+"</span><span class='amt'>"+$(this).val()+"</span><span>&euro; "+pp_total_price.toString().slice(0,-2)+","+pp_total_price.toString().slice(-2)+"</span></form></li>";

// which results in ->
<form id="form_51847052" method="post" action="cart/add/51847052">...text...</form>
<form id="form_51847053" method="post" action="cart/add/51847053">...text...</form>
<form id="form_51847054" method="post" action="cart/add/51847054">...text...</form>
etc...

然后是提交表单的函数

$('.temp-cart .addToCart').bind('click',function(){
        $('.temp-cart form').each(function(){
          var qty = $(this).find('.amt').text();
          var qty2 = parseInt(qty);
          var url = $(this).attr('action')+'/?quantity='+qty2+'/';

          $.ajax({
            url: url,
            type: "post",
            data: $(this).serialize(),
            success: function(response, textStatus, jqXHR) {},
            error: function(jqXHR, textStatus, errorThrown) {},
            complete: function() {
              updateStuff();
            }
          });
        });

然后是一个函数updateStuff()，它需要在所有表单提交完成后被触发一次。

 function updateStuff(){
        updateCartAjax();
        $('.order .pp_count, .pp_countsum .pp_count').val(0);
        $('.order .submit').popover('destroy').button('reset').animate({'opacity':'1'},200);
        $("html,body").stop(true, true).animate({scrollTop: 0}, 333);
        $(".pp_count").val('0');
        $("#pp_order_total ul li").remove();
        $("#pp_order_total ul").text('U heeft hiernaast nog geen producten geselecteerd.');
      }

所以我面临的问题是，当用户“创建”例如 7 个表单时，只会提交这 7 个表单中的一个。当我第二次单击提交按钮时，所有表单都已提交。我认为这与身份证有关，但事实并非如此。

其次，如何在所有表单提交后只运行一次updateStuff函数？

非常感谢任何帮助...

Answer 1

function deploy(){
    return new Promise(function(resolve,reject){
        var count= $('.temp-cart form').length;
        $('.temp-cart form').each(function(){
            var qty = $(this).find('.amt').text();
            var qty2 = parseInt(qty);
            var url = $(this).attr('action')+'/?quantity='+qty2+'/';

            $.ajax({
                url: url,
                type: "post",
                data: $(this).serialize(),
                success: function(response, textStatus, jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown) {},
                complete: function() {
                    count--;
                    if(count==0)
                        resolve();
                }
            });
        });
    });
}
$('.temp-cart .addToCart').bind('click',function(){
    deploy().then(function(){
        updateStuff();
    })
}