Question

我正在创建带有删除按钮的表行，但问题是我无法在Ajax外部找到该删除按钮。所以我在Ajax逻辑中使用Ajax，但我必须一次又一次地使用它。我想使用Ajax创建的按钮来调用单独的Ajax调用。

我的脚本是：

 $.ajax({
      url : "{{url('addtocart')}}",
      type : "POST",
      data : {_token: CSRF_TOKEN, username:username, userType:userType,
            table_no:table_no, order_no:order_no, cname:cname,
            tname:tname, dname:dname, dish_qty:dish_qty,
            chefnote:chefnote
              },
      success : function(data){
        //console.log(data);
        $('#cartOrder').empty();
        for(var i = 0; i < data.length; i++) {
              drawRow(data[i]);
            }
        function drawRow(rowData) { 
                var row = $("<tr />")
                row.empty();
                $("#cartOrder").append(row);
                row.append($("<td contenteditable='true' onBlur='saveToDb(this, "+rowData.dish+")'>" + rowData.dish + "</td>"));
                row.append($("<td contenteditable='true' id='xyz'>" + rowData.dish_qty + "</td>"));
                row.append($("<td contenteditable='true'>" + rowData.chefnote + "</td>"));
                row.append($("<td>"+"<button class='btn btn-primary' value='"+rowData.ord_id+"'>" +"Edit"+"</button>"+" | " +"<button class='btn btn-primary' id='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>" + "</td>"));
            }                

      //delete cart order
            $('tBody #deletecart').click(function(e){
              e.preventDefault();
              $.get("{{url('deletecart')}}",{id:$(this).val()},function(data){
               // console.log(data);
                 $.ajax({
                      url : "{{url('getcart')}}",
                      type : 'GET',
                      data : {table_no:table_no},
                      success : function(data){
                        console.log(data);
                        $('#cartOrder').empty();
                          for(var i = 0; i < data.length; i++) {
                                drawRow(data[i]);
                              }
                          function drawRow(rowData) { 
                            var row = $("<tr />")
                            row.empty();
                            $("#cartOrder").append(row);
                            row.append($("<td contenteditable='true'>" + rowData.dish + "</td>"));
                            row.append($("<td contenteditable='true'>" + rowData.dish_qty + "</td>"));
                            row.append($("<td contenteditable='true'>" + rowData.chefnote + "</td>"));
                            row.append($("<td>"+"<button class='btn btn-primary' value='"+rowData.ord_id+"'>" +"Edit"+"</button>"+" | " +"<button class='btn btn-primary' id='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>" + "</td>"));
                          }
                      }
                });
              });
            });
          }
    });
  });

如您所见，我第一次使用Ajax将数据加载到表中。但是当我单击“删除”时，该行将从数据库中删除，但不会从视图中删除。所以我在第二个Ajax中将删除按钮上的表数据加载。但是第二次单击“删除”按钮时它无法正常工作。可能是因为我正在调用父删除功能。我怎么能这样做？

Answer 1

问题在于ID。您不能在同一页面的多个位置使用相同的ID。在您的情况下，您需要使用类而不是id。

替换它：

<button class='btn btn-primary' id='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>

用？

<button class='btn btn-primary' class='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>

当你在循环中创建这个html时，id正在重复。所以使用class并覆盖你的删除功能：

 $('tBody .deletecart').click(function(e){

如何在Ajax之外找到Ajax创建的按钮

1 个答案: