我正在使用 PHP 和 MySQL 從我的資料庫中獲取一些資料。我正在使用jQuery 資料表插件。在表中，有一列包含“添加”按鈕。單擊按鈕時，Ajax 方法在后臺運行。
在我通過表格分頁更改表格資料或從表格的搜索選項中獲取資料之前，按鈕呼叫非常有效。data-row-id單擊添加按鈕后，我無法獲得 的值。
這是我的PHP代碼：
<script src="js/jquery.dataTables.min.js"></script>
<table id="basicTable" class="table table-striped table-bordered responsive">
<thead class="">
<tr>
<th>Coin No</th>
<th>Coin ID</th>
<th>Coin Symbol</th>
<th>Coin Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($conn, " SELECT ccl.* FROM coinmarketcap_coin_list ccl WHERE SYMBOL
NOT IN(SELECT COIN_SYMBOL FROM fetch_coinmarketcap_coins) ORDER BY ID ASC ");
$row = mysqli_fetch_array($result);
$i = 1;
do {
?>
<tr data-row-id="<?php echo $row['SYMBOL']; ?>">
<td><?php echo $i; ?></td>
<td><?php echo $row["COINMARKETCAP_ID"]; ?></td>
<td><?php echo $row["SYMBOL"]; ?></td>
<td><?php echo $row["COIN_NAME"]; ?></td>
<td class="">
<button type="button" class="btn btn-sm btn-warning add" data-id="<?php echo $row['SYMBOL']; ?>" style="float: none;">Add</button>
</td>
</tr>
<?php
$i ;
} while ($row = mysqli_fetch_array($result));
?>
</tbody>
</table>
還有我的客戶端代碼
$(document).ready(function(){
$('.add').on('click', function() {
var trObj = $(this).closest("tr");
var symbol = $(this).closest("tr").attr('data-row-id');
// var symbol = $(this).attr('data-id');
console.log(symbol);
$.ajax({
type:'POST',
url:'addCoins.php',
// dataType: 'json',
data:{symbol:symbol,action:"addCoinMarketCapCoin"},
success:function(data) {
trObj.remove();
$("#msg").removeClass('alert-danger');
$("#msg").addClass('alert-success').html("Coin " symbol " has been added successfully.");
}
});
});
});
uj5u.com熱心網友回復：
您會看到一個常見的行為 - 當您向 DOM 添加新元素時，這些元素不會系結任何事件處理程式，直到您顯式系結它們，例如通過呼叫$(newElement).click(...).
jQuery 讓您可以監聽父元素上的事件，例如<table>：
$('#basicTable').on('click', '.add', function() {
var $tr = $(this).closest("tr"),
symbol = $tr.data('row-id');
$.post('addCoins.php', {
symbol: symbol,
action: "addCoinMarketCapCoin"
}).done(function (data) {
$tr.remove();
$("#msg")
.removeClass('alert-danger')
.addClass('alert-success')
.text("Coin " symbol " has been added successfully.");
}).fail(function (jqXhr, status, error) {
$("#msg")
.removeClass('alert-success')
.addClass('alert-danger')
.text("Failed to add coin " symbol);
console.log(error);
});
});
這樣事件處理程式就設定在一個固定的地方，無論表格內容有多大變化，它都會對配置的事件做出反應。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/466619.html