Datatables jQuery在摺疊項目上的響應問題

Question

我在我的web項目中使用Datatables Library作爲標準HTML的替代品，並且在搜索和移動中進行排序方面相當不錯。

我遇到的問題是，在全屏我的jQuery和表沒有被響應JS修改它工作正常，我的jQuery執行完美沒有問題，每個人都很高興。一旦它摺疊移動或中等大小的設備，你可以點擊它打開，以擴展表和所有元素在視覺上可用，但沒有任何我寫的jQuery腳本執行。

我認爲它與改變HMTL有關，我不確定如何正確定位它以執行jQuery代碼。

伊夫添加的表的圖像全，一個在響應說明我的意思的大小

滿懷歉意

響應

這是我的jQuery的一部分，我認爲它可能是選擇器沒有找到它的類resp時onsive。

$('#quotes_table').DataTable({ 
     stateSave:true, 
     "dom": '<"pull-left"f><"pull-right"l>tip', 
     "fnDrawCallback":function(){ 

      $(".action_select").change(function() { 
       var text = $(this).val(); 
       var count = $(this).attr('num'); 
       var row_id = $("#row_id_" + count).attr('value'); 
       var name = $("#name_" + count).attr('value'); 
       var email = $("#email_" + count).attr('value'); 
       var tel = $("#telnum_" + count).attr('value'); 
       var house = $("#house_num_" + count).attr('value'); 
       var desc = $("#request_"+count).attr('value'); 
       var postcode = $("#postcode_" + count).attr('value'); 
       if (text == 'accept') { 
        var choice = confirm("Are you sure you want to accept the job?") 

        if (choice == true) { 
         $.ajax({ 
          url: "<?php echo base_url();?>jobs/accept_job", 
          type: 'POST', 
          data: { 
           row_id: row_id, 
           name: name, 
           email: email, 
           telnum: tel, 
           house: house, 
           postcode: postcode, 
           desc:desc 
          }, 
          success: function() { 
           $(".tbl_row_" + count).css("background-color", "#00CC00");//Green 
           alert("Job Accepted"); 
          }, 
          error: function() { 
           alert("Error"); 
          } 
         }) 
        } 

       } 
       if (text == 'reject') { 

感謝您的幫助提前。

Answer 1

您需要使用委託事件處理程序，因爲當表變得響應時，您的<select>控件將被重新創建。

另一個問題是您在fnDrawCallback回調函數中添加事件處理程序。它似乎不是放置事件處理程序的最佳位置。

我相信你需要改變你的代碼如下：

$('#quotes_table').DataTable({ 
    stateSave:true, 
    "dom": '<"pull-left"f><"pull-right"l>tip', 
    // (... skipped ...) 
}); 

// Handle SELECT control change event 
$('#quotes_table tbody').on('change', '.action_select', function(e){ 
    // (... skipped ...) 
});