Ajax 只工作一次

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 个项目，假设我点击了第三个项目，该项目从数据库中删除，也从列表中删除，但是当我在删除第三个项目后单击第一个项目时，ajax dosent 不再工作，也不再适用于我的列表项目点击他们的删除按钮。

Answer 1

检查通过 $("#delete").html(data) 传递给 id='delete' 的内容。 因为如果您通过 ajax 类操作任何数据，则不会考虑下一步操作。

您可以通过添加 alert('test'); 在点击天气动作触发器时检查它。

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