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

时间:2016-01-18 15:48:06

标签: javascript jquery ajax datatable

我正在使用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版本的数据表

6 个答案:

答案 0 :(得分:69)

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

您应将其更改为:

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

jQuery.on的文档中阅读更多内容。

答案 1 :(得分:1)

我有同样的问题。每次我的AJAX函数(modalContentAjaxRefresh)更新表时,页面停止。所以我只需要从:

更改代码

发件人:

  

$('。modal-toggle')。off('click',modalContentAjaxRefresh).on('click',   modalContentAjaxRefresh);

收件人:

  

$('#DataTables_Table_0_wrapper')。on(“ click”,“ .modal-toggle”,   modalContentAjaxRefresh);

我在数据表中的按钮是:

  

modal-toggle ”
  data-style =“ zoom-in”   href =“ / setting / account / {{account_turn.uuid}} / update”   data-toggle =“ modal” data-target =“#editAccount” wecare-method =“ GET”>

答案 2 :(得分:0)

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

因此,在我的情况下,我为按钮定义了onclick事件,并对其进行了调用。

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

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

答案 3 :(得分:0)

{{1}}

答案 4 :(得分:0)

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

产品列表是用于加载数据并启用分页的表。

这对我来说很好。

答案 5 :(得分:-1)

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

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