클릭 기능 언젠가 두 번, 세 번 이상 발포

Question

일부 이벤트를 호출 할 때이 클릭 기능을 사용합니다. 그러나 클래스를 클릭 할 때 두 번, 세 번 이상 발사하는 경우가 많습니다.

이 코드에 대한 올바른 제안과 해결 방법을 알려주십시오.

$(".PositiveReaction").unbind("click").click(function() { 
     var itemGraphId = this.id; 
     itemGraphId = itemGraphId.replace("Like", ""); 
     $.ajax({ 
      type: "Post", 
      url: "/React/AddReact", 
      dataType: "JSON", 
      data: { "itemGraphId": itemGraphId, "reactionTypeEnum": "POSITIVE" }, 
      success: function (data) { 
       $.each(data, function (i, item) { 
        $("#CountLike" + item.GraphID).html(item.CountPositiveReactions); 
        $("#CountDisLike" + item.GraphID).html(item.CountNegativeReactions); 
       }); 
      }, 
      error: function (req, status, error) {} 
     }); 
    }); 

Answer 1

변경되지 않는 조상에 첨부 된 위임 된 이벤트를 사용하십시오. 그럼 당신은 (물론 앱 로직에 따라) ON과 OFF를 설정 할 필요가 없습니다 :

$(document).on("click", ".PositiveReaction", function() { 

그것은 현재와 미래의 일치하는 요소에 대해 작동합니다.

위임 된 이벤트는 변경되지 않는 조상까지 버블 링하는 이벤트를 수신하여 작동합니다. 편리한/더 가까운 것이 없으면 document이 기본값입니다. 다음은 버블 체인의 요소에 jQuery 선택기를 적용합니다. 이면은 이벤트를 발생시킨 모든 일치 요소에 대해 함수를 호출합니다. 즉, 요소가 이벤트 처리기가 만들어 질 때가 아니라 이벤트 시간까지 일치 할 필요가 없음을 의미합니다.

참고 : 스타일을 지정하면 몸의 높이가 0이되어 이벤트가 발생하지 않을 수 있으므로 'body'을 위임 된 이벤트에 사용하지 마십시오! 대체로 document을 사용하십시오.

$(document).off("click.myapp"); 

Answer 2

최저 :

$(document).on("click.myapp", ".PositiveReaction", function() { 

함께 해제

:과에

켭니다

당신은 실제로 위임 핸들러를 해제 이벤트 이름에 네임 스페이스를 사용해야 하는가 방법은 다음과 같이 다시 작성하는 것입니다.

$(document).on("click",".PositiveReaction", function(){ ajaxFunction();}) 
$(document).off("click",".PositiveReaction",function(){ ajaxFunction();}) 

function ajaxFunction(){ 
//Do stuff here 
}