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不再起作用了，當我單擊它們時，它也不再對我的任何列表項起作用刪除按鈕。

Answer 1

檢查通過此$（“＃delete”）。html（data）傳遞給id ='delete'的內容。 因為如果您要通過ajax thous類進行操作，則不會考慮任何數據。

您可以通過單擊alert（'test'）來檢查天氣操作觸發器。

對於每一行，您可以通過在其后面附加行ID來考慮不同的ID。 在對“刪除”按鈕執行任何操作時，您可以根據唯一ID刪除特定的行。 喜歡