Question

我遇到麻烦让我的功能正常工作。实际上我有两个问题。 1）有时脚本只添加1个例如7个表单。 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个表单中的一个。当我再次单击提交按钮时，将提交所有表单。我认为这与id有关，但事实并非如此。

其次，如何在提交所有表单后只运行一次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();
    })
}

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

1 个答案: