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

Posted 2023-02-22

【中文标题】分页后数据表jquery点击事件不起作用

【英文标题】：datatables jquery click event not working after pagination

【发布时间】：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()。

我已经在这里给出了答案。 ***.com/questions/25575996/…你可能会看到这个。

@Md.HarunOrRashid 提出的解决方案真的很有帮助

【参考方案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();
     );
   );