使用 jquery 数据表搜索后，ajax 按钮调用不起作用

Question

我正在使用 PHP 和 MySQL 从我的数据库中获取一些数据。我正在使用 jQuery datatables plugin。在 table 中，有一列包含“添加”按钮。单击按钮时，Ajax 方法在后台运行。

在我通过 table 分页更改 table 数据，或从 table 的搜索选项获取数据之前，按钮调用工作正常。单击添加按钮后，我无法获得 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.");  
            }
        });
    });
});

Answer 1

您看到了一个常见的行为 - 当您向 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);
    });
});

这样事件处理程序就设置在一个固定的地方，无论table内容有多大变化，它都会对配置的事件做出反应。

使用 jquery 数据表搜索后，ajax 按钮调用不起作用

after using jquery datatable searching, ajax button call is not working

jquery

ajax

datatables