[英]datatables jquery click event not working after pagination
I am using http://datatables.net/我正在使用http://datatables.net/
<button class='btn btn-success activeAccount'>Activate Account</button>
I trigger ajax call on onclick event, below is ajax call code:我在 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();
}
}
});
}
I'm trying to run an onclick event which works normally on page one, but as soon as I go to page 2 (or any other) it stops working.我正在尝试运行一个在第一页上正常工作的 onclick 事件,但是一旦我转到第 2 页(或任何其他页面)它就会停止工作。
I'm using jquery-1.10.2.min.js and 1.9.4 version of datatable我正在使用 jquery-1.10.2.min.js 和 1.9.4 版本的数据表
$(document).on("click",".activeAccount",function(e){
// your code goes here
});
I had the same issue.我遇到过同样的问题。 Every time my AJAX function(modalContentAjaxRefresh) update the table the paging stop.每次我的 AJAX 函数(modalContentAjaxRefresh)更新表时,分页停止。 SO I just had to change my code from:所以我只需要更改我的代码:
From:从:
$('.modal-toggle').off('click', modalContentAjaxRefresh).on('click', modalContentAjaxRefresh); $('.modal-toggle').off('click', modalContentAjaxRefresh).on('click', modalContentAjaxRefresh);
to:到:
$('#DataTables_Table_0_wrapper').on("click", ".modal-toggle", modalContentAjaxRefresh); $('#DataTables_Table_0_wrapper').on("click", ".modal-toggle", modalContentAjaxRefresh);
My button inside datatable is:我在数据表中的按钮是:
< a title="Edit" class="btn btn-xs btn-info modal-toggle " < a title="Edit" class="btn btn-xs btn-info modal-toggle "
data-style="zoom-in" href="/setting/account/{{account_turn.uuid}}/update" data-toggle="modal" data-target="#editAccount" wecare-method="GET"> data-style="zoom-in" href="/setting/account/{{account_turn.uuid}}/update" data-toggle="modal" data-target="#editAccount" wecare-method="GET">
As @squaleLis said, the event is attached to only existing elements.正如@squaleLis 所说,该事件仅附加到现有元素。
So, in my case I defined onclick event for the button and called it.因此,在我的例子中,我为按钮定义了 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...
});
product-list is the table where data gets loaded and has paging enabled. product-list是加载数据并启用分页的表。
This works perfectly for me.这非常适合我。
I thinks a good and easy solution is to use drawCallback
option我认为一个好的和简单的解决方案是使用drawCallback
选项
The main important thing is to reassign the elements when click the pagination.最重要的是在单击分页时重新分配元素。
//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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.