Javascript 数据表 jquery 单击事件在分页后不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34858738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
datatables jquery click event not working after pagination
提问by ajay p
I am using 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 版本的数据表
回答by squaleLis
回答by Doug Mugnos
I had the same issue. Every time my AJAX function(modalContentAjaxRefresh) update the table the paging stop. SO I just had to change my code from :
我遇到过同样的问题。每次我的 AJAX 函数（modalContentAjaxRefresh）更新表时，分页停止。所以我只需要更改我的代码：
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"
data-style="zoom-in" href="/setting/account/{{account_turn.uuid}}/update" data-toggle="modal" data-target="#editAccount" wecare-method="GET">
<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">
回答by Neelima Ediga
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..
}
回答by Mahmut Ayd?n
$(document).on("click",".activeAccount",function(e){
// your code goes here
});
回答by Fernando Palma
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();
});
});
