javascript - 数据表删除按钮在除第一个页面之外的其他页面上不起作用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我正在使用数据表。我在表中有一个操作列，其中有一个删除按钮，我正在使用 ajax post 函数删除任何行。但删除按钮仅在第一页有效。它在其他页面上不起作用。这是我的删除按钮。

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
    <tr>   
        <th>#</th>
        <th class="col-md-5">Resource Person</th>
        <th class="col-md-4">Title/Topic</th>
        <th> Date </th>
        <th>Actions</th>
    </tr>
</thead>
<tbody>
    <?php 
    $sql = "SELECT * FROM seminar";
    $result = $con->query($sql);

    if ($result->num_rows > 0) {
                                    // output data of each row
        $count = 1;
        while($row = $result->fetch_assoc()) { ?>
        <tr>
            <td><?= $count ?></td>
            <td><?= $row['person'] ?></td>
            <td><?= $row['topic'] ?></td>
            <td><?= $row['date'] ?></td>
            <td>
                <button class="btn btn-danger delete_seminar" value="<?php echo $row['id'] ?>"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                <button class="btn btn-info" onclick="location.href = 'addRecord.php?id=<?php echo $row['id'] ?>';"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
            </td>
        </tr>
        <?php $count++; }

    }else{
        echo "<tr><td colspan='5'><center>No Record Found</center></td></tr>"; 
    }
    ?>

</tbody>

还有我的 jquery 函数。

$('#example').DataTable();    
$(function() {
        $(".delete_seminar").on('click', function(event) {

            if (confirm("Are you sure?")) {
                var data = $(this).val();
                $.post('requests/seminars.php', {delete_sem: data}, function(data) {
                    if (data == "delete") {
                        location.reload();
                    }else{
                        alert(data);
                    };

                });
            }

        });    
    })

我不知道如何解决这个问题。请帮助我解决这个问题。

Answer 1

您必须像下面这样编辑您的 JavaScript

$(document).on('click', '.delete_seminar', function(e){..});