Question

我有一些带有输入字段的表单，在提交表单时，数据会附加到表中，更像是列表。数据将附加到表列表中，并使用ajax发送到数据库，当我单击提交时，两个操作都会发生。以下是表格。

<div id ="product_calculator" style="border: 1px solid gray; padding: 10px; display:none;margin-top: 5px;"><br>
    <div class="row">
        <div class="col-md-2">
            <label>Product Name</label>
            <input class="form-control" name="productname" type="text" id="productname" value=""><br>
        </div>
        <div class="col-md-2">
            <label>Width</label>
            <input class="form-control" name="width" step ="any" type="text" id="width" value=""><br>
        </div>
        <div class="col-md-2">
            <label>Height</label>
            <input class="form-control" name="height" step ="any" type="text" id="height" value=""><br>
        </div>
        <div class="row">
            <div class="col-md-1">
                <input type="button" class="btn btn-default" name="submit" class="submit" id="submit" class="btn btn-info" value="ADD TO LIST" />  
            </div>
        </div>

这是附加数据的表，

<div>
    <table class="table table-hover">
        <thead>
           <tbody class="details">
           </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>

这是jquery和ajax，我将数据附加到列表并将其发送到数据库，您还可以将删除按钮附加到我的每个附加列表项

$('#submit').on("click" , function(){
    var productname = $('#productname').val();
    var width = $('#width').val();
    var height = $('#height').val();
        $.ajax({
          url:"item_list_process.php",
          method:"POST",
          data:{productname:productname,width:width,height:height},
          success:function(data){
              $("#list_message").html(data)
          }
      })

    var tr = '<tr>'+
               '<td><input type="text" name="product_name[]" required class="form-control product_name" value="'+productname+'"></td>'+
               '<td><input type="text" name="width[]" required class="form-control width" value="'+width+'"></td>'+
               '<td><input type="text" name="height[]" required class="form-control height" value="'+height+'"></td>'+

               '<td><input type="button" name="remove" class="btn btn-danger remove" value="Remove"></td>'+
          '</tr>';
      $('.details').append(tr);

})

现在您可以看到我为每个列表项附加了一个删除按钮，单击按钮后，我使用ajax和jquery从表中以及数据库中删除列表项。代码如下，我使用附加列表中的数据将其发送到php，以便识别要删除的项目行

$('.details').on('click','.remove',function(){
    var con = confirm("Do you want to remove it ?");
    if(con){
        var pro = $('.product_name').val();
        var wid = $('.width').val();
        var hei = $('.height').val();
            $.ajax({
              url:"item_list_delete.php",
              method:"POST",
              data:{pro:pro,wid:wid,hei:hei},
              success:function(data){
                  $("#delete").html(data)
              }
          })
        $(this).parent().parent().remove();     
    }
});

现在的问题是，当我删除数据时，ajax似乎只在从数据库中删除数据时才工作一次，之后它才起作用，例如假设我有4个项目，让我说我点击了第3项，该项目从数据库中删除，也从列表中删除，但是当我在删除第3项后点击第一项时，ajax dosent工作了，当我没有更多的列表项时它也不起作用点击他们的删除按钮。

Answer 1

检查传递给id =＆＃39;删除＆＃39;通过这个$（＆＃34; #delete＆＃34;）。html（数据）。因为如果你通过ajax thous类进行操作的任何数据都不会被考虑用于下一个操作。

您可以通过添加提醒（＆＃39; test＆＃39;）来点击天气动作触发器;

对于每一行，您可以通过向其添加行ID来考虑不同的ID。当您在删除按钮上执行任何操作时，您可以根据唯一ID删除特定行。喜欢

Ajax仅工作一次

1 个答案: