[英]datatables jquery click event not working after pagination
<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 版本的数据表
因为事件仅附加到现有元素。
您应该将其更改为:
$("#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);
我在数据表中的按钮是:
< 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">
正如@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...
});
product-list是加载数据并启用分页的表。
这非常适合我。
我认为一个好的和简单的解决方案是使用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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.