Question

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

Answer 1

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

您应将其更改为：

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

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

Answer 2

我有同样的问题。每次我的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”>

Answer 3

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

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

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

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

Answer 4

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

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

这对我来说很好。

Answer 5

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

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

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

6 个答案: