刪除按鈕僅適用於第一行而非其餘行

我已經從數組中提取值（卡片詳細信息）並將它們放入一個html表格中，我還添加了刪除按鈕以刪除特定的卡片。刪除按鈕僅適用於第一行而非其餘行

我正在通過ajax刪除它。當我點擊第一行的刪除按鈕時，它完美的工作，但是當我點擊第二行或第三行的其他刪除按鈕時，沒有任何操作。

請建議正確的路徑來解決這個問題。

在此先感謝

這裏是我的代碼

  <tr> 
         <td><?php echo $val['last4'];?></td> 
         <td><?php echo $val['exp_month'];?></td> 
         <td><?php echo $val['exp_year'];?></td> 
         <td><button id = "del">Delete</button></td> 
        </tr> 

Ajax part 


<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script>       
     $('#del').click(function() { 
     //var a=document.getElementById("").value; 
     var val0 = $('#id').val(); 
     var val01 = $('#cust').val(); 

     var fade = document.getElementById("fade");   

     var show = function(){ 
     fade.style.display = "block"; 
     } 

     show(); 
     $.ajax({ 
     type: 'POST', 
     url: 'mywebsite.com/deleting.php', 
     data: { card_id: val0,cust_id: val01 }, 
     success: function(response) { 
     fade.style.display = "none"; 
     // alert(response); 
     mystring = response.replace(/^\s+|\s+$/g, ""); 
     $('#result11').html(mystring); 

     } 
     }); 
     }); 
    </script>

來源

2017-01-29 Mario

您的按鈕上有相同的ID。 Id在html文檔中必須是唯一的，並且不能在多個元素之間共享。 Read more about the html id attribute

更改按鈕，使用一個類來代替：

<td><button class="del">Delete</button></td>

然後改變你的jQuery綁定到類，而不是：

$('.del').click(function(e) { 
    // Since we're using ajax for this, stop the default behaviour of the button 
    e.preventDefault(); 

    // Get the value from the clicked button 
    var val0 = $(this).val();

我還添加了事件e在函數調用，並在被點擊時停止按鈕的默認行爲（即提交表單）。

來源

2017-01-29 11:14:12

謝謝，它現在完美。但是爲什麼在使用Id時不起作用？ – Mario

@Mario - 第一段解釋。另外，請檢查鏈接 –

@Mario根據[DOM規格]（http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId），從技術上講，唯一ID會導致未定義的行爲。然而，實際上，大多數（所有？）瀏覽器在使用getElementById（）（這是$（'＃del'）'在後臺執行的操作）時返回* first *元素。因此，在您的代碼中，只有第一個按鈕結束了連接的點擊處理程序。 – robinCTS

你需要給刪除按鈕類和綁定的事件在該類不是ID。然後在綁定函數中選擇該行元素的值，然後將它們傳遞給Ajax。

來源

2017-01-29 11:10:15 mhshimul

刪除按鈕僅適用於第一行而非其餘行

回答

相關問題