web-dev-qa-db-ja.com

ページネーション後にdatatables jqueryクリックイベントが機能しない

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

1ページ目で正常に機能するonclickイベントを実行しようとしていますが、2ページ目（または他のページ）に移動するとすぐに機能しなくなります。

Jquery-1.10.2.min.jsと1.9.4バージョンのデータテーブルを使用しています

javascriptjqueryajaxdatatable
22
ajay p

イベントは既存の要素にのみ添付されるためです。

次のように変更する必要があります。

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

詳細については、 jQuery.on のドキュメントをご覧ください。

81
squaleLis

@squaleLisが言ったように、イベントは既存の要素にのみ添付されます。

したがって、私の場合、ボタンのonclickイベントを定義して呼び出しました。

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

  function YourMethod() {
     ....same code..
  }
2
Neelima Ediga

同じ問題がありました。 AJAX function（modalContentAjaxRefresh）がテーブルを更新するたびにページングが停止します。SOコードを次のように変更する必要がありました。

から：

$（ '。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">

1
Doug Mugnos