数据表 jQuery 单击事件在分页后不起作用

datatables jquery click event not working after pagination

本文关键字：分页 不起作用 事件 jQuery 单击 数据表      更新时间：2023-09-26

我正在使用 http://datatables.net/

<button class='btn btn-success activeAccount'>Activate Account</button>

我在点击事件上触发 ajax 调用，下面是 ajax 调用代码：

$(".activeAccount").click(function() {
  var intCounselorId = $(this).parent().parent().find('input[class="counselorId"]').attr("value");
  var intOwnerId = $(this).parent().parent().find('input[class="userID"]').attr("value");
  var strAction = 'activateAccount';
  performAction(intCounselorId, intOwnerId, strAction);
});
function performAction(intCounselorId, intOwnerId, strAction) {
  $.ajax({
      url: '/admin/counselormanagement/expertmanagementgridaction',
      data: 'intCounselorId='+intCounselorId+'&intOwnerId='+intOwnerId+'&strAction='+strAction,
      type: "POST",
      async:false,
      success: function(intFlag) {
        if(intFlag == 1){
          location.reload();
        }
      }
  });
}

我正在尝试运行一个在第一页上正常工作的 onclick 事件，但是一旦我转到第 2 页（或任何其他页面），它就会停止工作。

我正在使用jquery-1.10.2.min.js和1.9.4版本的数据表

因为事件仅附加到现有元素。

您应该将其更改为：

$("#tableId").on("click", ".activeAccount", function(){
   // your code goes here
});

在jQuery.on的文档中阅读更多内容。

$(document).on("click",".activeAccount",function(e){
 // your code goes here
});

我遇到了同样的问题。每次我的 AJAX 函数（modalContentAjaxRefresh）更新表时，分页都会停止。所以我只需要将我的代码从：

从：

$（'.

modal-toggle'）.off（'click'， modalContentAjaxRefresh）.on（'click'， modalContentAjaxRefresh）;

自：

$（'#DataTables_Table_0_wrapper'）.on（"click"， ".modal-toggle"， modalContentAjaxRefresh）;

我在数据表中的按钮是：

modal-toggle"
数据样式="放大" href="/setting/account/{{account_turn.uuid}}/update" data-toggle="modal" data-target="#editAccount" wecare-method="GET">

正如@squaleLis所说，该事件仅附加到现有元素。

因此，就我而言，我为按钮定义了onclick事件并调用了它。

  <button class='btn btn-success activeAccount' onclick="YourMethod();">Activate Account</button>
  function YourMethod() {
     ....same code..
  }

$("#product-list").on("click",".btn-delete-product",function(e){
    e.preventDefault();
    var prodId     =   $(this).attr("product-id"); 
    .... code to delete the record from the db...
  });

产品列表是加载数据并启用分页的表。

这对我来说非常有效。

我认为一个好的简单解决方案是使用drawCallback选项

主要重要的是在单击分页时重新分配元素。 

//function to assign event
var assign_actions = function(){
  //Some code  
}
  //when the page is ready
  $( document ).ready(function() {
    assign_actions();
    //Code to assign event when paginate
     $('.paginate_button').on('click', function(){
       assign_actions();
     });
   });
相关文章：