爲什麼JQuery點擊功能在dataTable的後續頁面中不起作用？

Question

我有這個代碼顯示一個主題列表，刪除和編輯數據表中的按鈕。

Display.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> 

的script.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中的click函數似乎不能識別模式上的刪除操作。我只能在數據表的第一頁上刪除，但不能在後續頁面上刪除。

這個問題似乎是什麼問題？請幫忙。多謝你們。

Answer 1

它只會結合的第一頁上，因爲他們是唯一可以在時間選擇

嘗試使用

$("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(); 
    } 
}); 

您可能需要點擊綁定到的table祖先例如$("body").on("click","button.faq-delete-topic",...);取決於傳呼如何工作

Answer 2

您當前的邏輯僅將點擊處理程序應用於可見行。無論何時更改頁面，UI都會刷新並顯示新行，而不應用任何點擊處理程序。

使用createdRow事件的數據表來初始化你的按鈕，只是因爲它是這裏介紹： https://www.datatables.net/examples/advanced_init/row_callback.html

有值得一試，如果你想了解更多的先進典型多個其他例子。我還建議使用REST WebService進行分頁，該分頁僅返回當前所需的頁面數量，而不是一次性獲取所有頁面。這對於更多數據來說是更快的解決方案。