javascript - 为什么 JQuery 单击功能在 dataTable 的后续页面中不起作用？

Question

我有这段代码，可以在数据表中显示带有删除和编辑按钮的主题列表。

显示.php

<table data-toggle="table" class="table table-striped table-hover">
                <thead>
                <tr>
                    <th><input type="checkbox" name="all_topic"></th>
                    <th>Topic</th>
                    <th>Date Created</th>
                    <th>Date Update</th>
                    <th>Options</th>
                </tr>
                </thead>
                <tbody>
                <?php 
                     $topics = array();
                     $faq = new Faq; 
                     $topics = $faq->all();
                ?>
                <?php  $i = 1;
                   foreach($topics as $topic) : ?>
                    <tr id="tr-id-<?php echo $i; ?>" class="tr-class-<?php echo $topic->id; ?>" data-topic-id="<?php echo $i; ?>">
                        <td><input type="checkbox" name="topic[]" value="<?php echo $topic->id; ?>" class="faq-checkbox"></td>
                        <td id="td-id-<?php echo $i; ?>" class="td-class-<?php echo $i; ?>">
                            <?php echo $topic->topic; ?>
                        </td>
                        <td><?php echo $topic->date_created; ?></td>
                        <td><?php echo $topic->date_updated; ?></td>
                        <td>
                            <a class="btn btn-info" href="faqs-edit-topic.php?id=<?php echo $topic->id; ?>">Edit</a>
                            <button class="btn btn-danger" data-toggle="modal" data-target="#faq-delete-modal-<?php echo $topic->id; ?>" >Delete</button>
                            <div id="faq-delete-modal-<?php echo $topic->id; ?>" class="modal fade" tabindex="-1" role="dialog" >
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">Delete Topic</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>Delete  <b><i><?php echo $topic->topic; ?></i></b> ? </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                            <button type="button" class="btn btn-danger faq-delete-topic" data-modal-id="faq-delete-modal-<?php echo $topic->id; ?>" data-topic-id="<?php echo $topic->id; ?>" >Delete </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>                   
                </tbody>
            </table>

脚本.js

$(document).ready(function(){
   $('.faqs table').dataTable({
    searching: false,
    "order": [[3, 'desc']],
    "columns": [
        { orderable: false, width: "10%" },
        null,
        null,
        null,
        { orderable: false, width: "20%" }]
     });

    $("button.faq-delete-topic").click(function(){
    var $topic_id = $(this).attr("data-topic-id");
    var modal_id = "#" + $(this).attr("data-modal-id");
    $.post('faqs-delete-topic.php',{'topic_id': $topic_id}, function(success){
        console.log(success);
        if(success) {
            // $("table tbody tr[data-topic-id="+ $topic_id +"]").remove();
            $(modal_id).modal('hide');
            $('.faqs table').DataTable().row(".tr-class-"+$topic_id).remove().draw(false);
            display_message('Topic successfully deleted.');
        }
    });
});

});

现在，当我有一长串主题时，数据表会自动创建一个分页来一次显示主题列表。每当我尝试使用删除按钮删除主题时，它都会显示模式，然后单击模式上的删除按钮会删除该主题，但仅在数据表的第一页上。如果我尝试转到数据表的下一页，script.js 中的单击函数似乎无法识别模式上的删除操作。我只能删除数据表的第一页，而不能删除后续页面。

这个问题似乎出在哪里？请帮忙。谢谢大家。

Answer 1

它只会绑定(bind)第一页上的那些，因为它们是当时唯一可以选择的

尝试使用

$("table").on("click","button.faq-delete-topic",function(){
var $topic_id = $(this).attr("data-topic-id");
var modal_id = "#" + $(this).attr("data-modal-id");
disable_delete1_button();
$.post('faqs-delete-topic.php',{'topic_id': $topic_id}, function(success){
    console.log(success);
    if(success) {
        // $("table tbody tr[data-topic-id="+ $topic_id +"]").remove();
        $(modal_id).modal('hide');
        $('.faqs table').DataTable().row(".tr-class-"+$topic_id).remove().draw(false);
        display_message('Topic successfully deleted.');
        remove_disable_delete1_button();
    }
});

您可能需要将点击绑定(bind)到table的祖先，例如$("body").on("click","button.faq-delete-topic",...); 取决于分页的工作方式