데이터 테이블 jquery click 이벤트가 페이지 지정 후 작동하지 않음

데이터 테이블 jquery click 이벤트가 페이지 지정 후 작동하지 않음

http://datatables.net/ 를 사용하고 있습니다.

<button class='btn btn-success activeAccount'>Activate Account</button>

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페이지에서 정상적으로 동작하는 클릭 이벤트를 실행하려고 하는데, 2페이지(또는 다른 페이지)로 이동하자마자 동작을 멈춥니다.

jquery-1.10.2.min.js 및 1.9.4 버전의 datatable을 사용하고 있습니다.

이벤트가 기존 요소에만 첨부되기 때문입니다.

다음으로 변경해야 합니다.

$("#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('클릭', modalContentAjaxRefresh).on('클릭', modalContentAjaxRefresh);

대상:

$("#DataBles_Table_0_wrapper") on("클릭", ".modal-toggle", modalContentAjaxRefresh");

데이터 테이블 내의 버튼은 다음과 같습니다.

< a title = "Edit" class="btn btn-info btn-info modal-param"
data - style = " " href = " / setting / account / { account _ turn . } / update " data - scount = " modal " data - target = " # edit Account = " wecare - scount = "GET">

@squaleLis가 말했듯이 이벤트는 기존 요소에만 부가됩니다.

그래서 저는 버튼의 클릭 이벤트를 정의하고 호출했습니다.

  <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는 데이터가 로드되어 페이징이 유효하게 되어 있는 테이블입니다.

이건 나한테 딱 맞아.

옵션을 사용하는 것이 좋고 쉬운 해결책이라고 생각합니다.

중요한 것은 페이지 번호를 클릭했을 때 요소를 다시 할당하는 것입니다.

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

언급URL : https://stackoverflow.com/questions/34858738/datatables-jquery-click-event-not-working-after-pagination