分页后数据表jquery点击事件不起作用答案

【问题标题】：datatables jquery click event not working after pagination分页后数据表jquery点击事件不起作用
【发布时间】：2016-04-23 20:39:32
【问题描述】：

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

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

我在onclick事件上触发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 版本的数据表

【问题讨论】：

.activeAccount 按钮是否在表格内容中？另外，请注意使用async: false 是非常糟糕的做法，并且成功处理程序中的location.reload() 完全否定了首先发出AJAX 请求的全部意义。
是的，在表格内容下
在这种情况下，您需要根据@squaleLis 的回答使用委托事件处理程序。不过，您真的应该摆脱 async: false 和 location.reload()。
我已经在这里给出了答案。 stackoverflow.com/questions/25575996/…你可能会看到这个。
@Md.HarunOrRashid 提出的解决方案真的很有帮助

标签： javascript jquery ajax datatable

【解决方案1】：

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

你应该把它改成：

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

阅读jQuery.on的文档了解更多信息。

【讨论】：

@sarower-jahan 谢谢 :)
谢谢，这真的很有帮助。
在我的例子中，在点击事件之前 "$(".each_player").click(function(){ // 我的代码在这里 });"修改后 "$("#playerGroupUI").on("click", ".each_player", function(){ // 我的代码放在这里 });"
这触发了多次而不是一次！？页面上有 10 个删除图标，单击一个删除确认被触发两次

【解决方案2】：

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

【讨论】：

【解决方案3】：

我有同样的问题。每次我的 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">

【讨论】：

【解决方案4】：

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

所以，在我的例子中，我为按钮定义了 onclick 事件并调用它。

  <button class='btn btn-success activeAccount' onclick="YourMethod();">Activate Account</button>

  function YourMethod() {
     ....same code..
  }

【讨论】：

【解决方案5】：

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

product-list 是加载数据并启用分页的表。

这对我来说非常适合。

【讨论】：

【解决方案6】：

最重要的是在点击分页时重新分配元素。

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

【讨论】：