jQuery 이벤트는 클래스 선택기를 다시 적용한 후에 실행되지 않습니다.

Question

좋아요. 두 개의 AJAX 메소드를 실행하는 사용자 정의 폼에서 버튼을 사용하는 곳에 문제가 있습니다.이 두 함수는 올바른 방식으로 처음 선택 될 때 작동합니다. 내가 겪고있는 문제는 이벤트 핸들러가있는 클래스를 추가/삭제 한 후에 동일한 함수를 다시 실행하려고 시도한 후 다시 실행하지 못하고 다시 사용할 수 없다는 것을 의미합니다.

내 연구에서이 문제는 jQuery 이벤트 위임이며 문서를 읽은 후 내 원래의 클릭 기능을 변경 한 후 이벤트 핸들러를 다시 이해해야한다는 것을 알았습니다.

$(document).ready(function() { 
     $(".checkButton").on('click', function() { 
      var objID = this.id; 
      $.ajax({ 
       url: "index.php?system=testimonials&task=update", 
       type: 'POST', 
       data: {val: objID}, 
       success: function (data, textStatus, jqXHR) 
       { 
        $("#testimonialSpan" + objID).removeClass("label-warning"); 
        $("#testimonialSpan" + objID).addClass("label-success"); 
        $("#testimonialSpan" + objID).text("Approved"); 
        $("#testimonialTick" + objID).removeClass("fa-check"); 
        $("#testimonialTick" + objID).addClass("fa-times"); 
        $("#" + objID).removeClass("checkButton"); 
        $("#" + objID).addClass("timesButton"); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) 
       { 
        alert(textStatus + errorThrown + jqXHR); 
       } 
      }); 
     }); 

     $(".timesButton").on('click', function() { 
      var objID = this.id; 
      $.ajax({ 
       url: "index.php?system=testimonials&task=update", 
       type: 'POST', 
       data: {times: objID}, 
       success: function (data, textStatus, jqXHR) 
       { 
        $("#testimonialSpan" + objID).removeClass("label-success"); 
        $("#testimonialSpan" + objID).addClass("label-warning"); 
        $("#testimonialSpan" + objID).text("Pending"); 
        $("#testimonialTick" + objID).removeClass("fa-times"); 
        $("#testimonialTick" + objID).addClass("fa-check"); 
        $("#" + objID).removeClass("timesButton"); 
        $("#" + objID).addClass("checkButton"); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) 
       { 
        alert(textStatus + errorThrown + jqXHR); 
       } 
      }); 
     }); 
    }); 

나는 가까이 있지만 나는이 기능을 예상대로 만들 수 없다고 생각합니다.

Answer 1

사용 $(document).on('click', '.checkButton', function(){}); 대신 $(".checkButton").on('click', function(){}); 및 IT 요소에없는 문서에 이벤트를 바인딩 대신 $(".timesButton").on('click', function() {});

의 $(document).on('click', '.timesButton ', function(){});. 선택기가있는 요소를 클릭 할 때마다 해당 요소가 실행됩니다.