動態表中的jQuery表單不會檢測到第二行

Question

我有一個文件可以根據數據庫中的記錄生成動態表。並在每一行旁邊放置一個按鈕來刪除該行。我的代碼現在運行良好，但只有第一行。從第2行開始，jquery不會檢測到被點擊的特定行。

這是我的PHP文件

while ($row = mysqli_fetch_array($queryresult)){ 
       $id   = $row['requestID']; 
       $customerID = $row['userID']; 
       $username = $row['username']; 
       $amount  = $row['amount']; 
       $time  = $row['requested_at']; 
       $status  = $row['status']; 

       //display out the results to the user 
       echo "<tr>"; 
       echo "<td> $username </td>"; 
       echo "<td> $amount </td>"; 
       echo "<td> $time </td>"; 
       echo "<td> $status </td>"; 
       echo "<td> <form method='POST'> 
          <input type='hidden' name='wdID' id='wdID' value='".$id."'/> 
          <input type='hidden' name='customerID' id='customerID' value='".$customerID."'/> 
          <input type='hidden' name='amount' id='amount' value='".$amount."'/> 
          <button class=\"btn btn-success btn-xs\" id=\"acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
          </form> 
         </td>"; 
       echo "</tr>"; 

     } 
      mysqli_free_result($queryresult); 
      mysqli_close($connection); //close the database 

，這是我的JavaScript文件

$("#acceptWD").click(function(event){ 
    event.preventDefault(); 
    var self = $(this); 
    var wdID = $(this).$("#wdID").val(); 
    var customerID = $("#customerID").val(); 
    var amount = $("#amount").val(); 
    console.log(wdID); 
     $.ajax({ 
      type: 'POST', 
      url: 'process_withdraw_request.php', 
      data: {wdID:wdID, customerID:customerID, amount:amount}, 
      success: function(result){ 
      //console.log(result); 
      if(result){ 
       $.notify({ 
        // options 
        message: 'The Request Has Been Accepted' 
       },{ 
        // settings 
        delay: 2000, 
        allow_dismiss: false, 
        placement: { 
         from: "top", 
         align: "center" 
        }, 
        type: 'success' 
       }) 
       setTimeout(function(){ 
        window.location.reload(1); 
       }, 4000); 
      } 
      } 
     }); 
}); 

我嘗試使用下面的代碼，但仍然沒有

$("#acceptWD").on('click', function(){ 
var a = $(this).closest('tr').val(); 
    console.log(a); 
}); 

請幫忙謝謝

Answer 1

所有這些IDs將每一行中是相同的：

echo "<td> <form method='POST'> 
    <input type='hidden' name='wdID' id='wdID' value='".$id."'/> 
    <input type='hidden' name='customerID' id='customerID' value='".$customerID."'/> 
    <input type='hidden' name='amount' id='amount' value='".$amount."'/> 
    <button class=\"btn btn-success btn-xs\" id=\"acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
    </form> 
</td>"; 

現在的ID必須是唯一的，如果不是，你剎車的東西。所以，你可能會改變這些ID對類是這樣的：

echo "<td> <form method='POST'> 
    <input type='hidden' name='wdID' class='wdID' value='".$id."'/> 
    <input type='hidden' name='customerID' class='customerID' value='".$customerID."'/> 
    <input type='hidden' name='amount' class='amount' value='".$amount."'/> 
    <button class=\"btn btn-success btn-xs acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
    </form> 
</td>"; 

那麼你的JavaScript看起來像：

$(".acceptWD").on('click', function(){ 
    var parentTd = $(this).closest('td'); 
    console.log(parentTd.find('.wdID').val()); 
}); 

Here is a simplified example

Answer 2

Javascript ID應該是唯一的。否則將採取第一個。

<div id="targetID">I am first Element.<div> 
<div id="targetID">I am second Element.<div> 

<script> 
$(function(){ 
alert($("#targetID").html()); 
}); 
</script> 

結果：我是第一個元素。

Answer 3

正如其他人所說，你正在使用的每一個相同的標識符行。所以你需要添加一些東西來唯一標識它們。在這個例子中，我在php中增加了一個「計數器」，它隨着每個while循環而增加;並且該計數器被固定到所有標識符的末尾。

此外，我存儲了每行計數器的值data-屬性data-row_index，我決定將該屬性放入按鈕的標記中。

然後，jquery必須正確提取值。

我沒有測試過這一點，但是這應該讓你去....

// php 
$row_counter = -1 ; 
while ($row = mysqli_fetch_array($queryresult)){ 
$row_counter++ ; 
// ... 
echo "<td> 
     <form method='POST' 
       > 
      <input type = 'hidden' 
        name = 'wdID' 
        id = 'wdID" . $row_counter . "' 
        value = '".$id."' 
        /> 
      <input type = 'hidden' 
        name = 'customerID' 
        id = 'customerID" . $row_counter . "' 
        value = '".$customerID."' 
        /> 
      <input type = 'hidden' 
        name = 'amount' 
        id = 'amount" . $row_counter . "' 
        value = '".$amount."' 
        /> 
      <button data-row_index = '" . $row_counter . "' 
        class = 'btn btn-success btn-xs' 
        id = 'acceptWD" . $row_counter . "' 
        title = 'Accept Withdraw Request' 
        type = 'button' 
       > 
       <i class=\"glyphicon glyphicon-ok\"></i> 
      </button> 
     </form> 
    </td>"; 
    // ...   


// jquery 
$(".btn").click(function(event){ 
    event.preventDefault(); 
    var self  = $(this); 
    var row_index = self.attr("row_index") ; 
    var wdID  = $("#wdID"  + row_index).val(); 
    var customerID = $("#customerID" + row_index).val(); 
    var amount  = $("#amount"  + row_index).val(); 
    // ... 
});