.done 처리기가 여러 번 호출되지 않도록하려면 어떻게해야합니까?

Question

내가 버튼을 누르면이 JQuery와 표현을 가지고, 서버에서 일부 HTML을 가져온 다음 내 문서의 DOM 노드에 추가 :

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".addbutton").click(function() { 
       var addbuttonNode = $(this); 
       $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' }) 
        .done(function (data) { 
         $(addbuttonNode).next().next().append(data); //find better way of doing this 
        }); 
      }); 
     }); 
    </script> 

내 웹 사이트에 여러 개의 ".addButton"버튼이 . 내가 겪고있는 문제는 버튼을 여러 번 클릭하면 my .done 핸들러가 여러 번 호출된다는 것입니다.

내 생각 엔 실행중인 이벤트 핸들러 목록이 있는데, 어디서/왜 이런 일이 일어나는 지 이해할 수 없다.

Answer 1

: 한 번만 클릭 할 수 대신 각 버튼을하고자하는 경우

$(document).ready(function() { 
    $(".addbutton").click(function() { 
     // if any request pending, return {undefined} 
     if ($.active) return; 
     var addbuttonNode = $(this); 
     $.post("/InteractiveApplications/GetQuizAnswer", { 
      id: '@guid' 
     }).done(function (data) { 
      // instead of .next().next() 
      $(addbuttonNode).nextAll('selector').first().append(data); //find better way of doing this 
      // or .parent().find('selector') 
     }); 
    }); 
}); 

, 다음 jQuery를 .one() 방법을 사용

문제는 당신이 요청을 한 번 이상 오히려 수행 한 다음에 완료된 후에 완료됩니다. 데이터 개체에 상태를 유지할 수 있습니다 ::

$(document).ready(function() { 
    var posting = false; 
    $(".addbutton").data("done", false).click(function() { 
     var addbuttonNode = $(this); 
     if (!addbuttonNode.data("done")) { 
      addbuttonNode.data("done", true); 
      $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' }) 
       .done(function (data) { 
        $(addbuttonNode).next().next().append(data); 
       }); 
     } 
    }); 
}); 

Answer 2

이벤트 처리를 위해 바인드 및 바인드 해제 함수를 사용해보십시오. 그런 다음 한 번 실행 된 후에 클릭 기능의 바인딩을 해제 할 수 있습니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".addbutton").bind('click',function() { 
      var addbuttonNode = $(this); 
      $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' }).done(function (data) { 
       addbuttonNode.next().next().append(data); 
      }); 
      addbuttonNode.unbind('click'); 
     }); 
    }); 
</script> 

, 나는이 더 있어야한다 거의 같은 일을하는 또 다른 방법을 생각 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".addbutton").each(function(){ 
      $(this).bind('click',function() { 
       $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' }).done(function (data) { 
        addbuttonNode.next().next().append(data); 
       }); 
       $(this).unbind('click'); 
      }); 
     }); 
    }); 
</script> 

나는 아직 그것을 시도하지 않은,하지만 작동합니다, 그것을 시도! :)

클래스 또는 데이터 속성을 설정하여 버튼이 이미 클릭되었는지 확인할 수도 있습니다. 그런 다음 if ($ (this) .hasClass ('clicked')) {return; } 또는 뭔가 ...

Answer 3

당신은 보류하고있는 요청을 확인할 수 있습니다 :

$(document).ready(function() { 
    $(".addbutton").one('click', function() { 
     var addbuttonNode = $(this); 
     $.post("/InteractiveApplications/GetQuizAnswer", { 
      id: '@guid' 
     }).done(function (data) { 
      // instead of .next().next() 
      $(addbuttonNode).nextAll('selector').first().append(data); //find better way of doing this 
      // or .parent().find('selector') 
     }); 
    }); 
}); 

Answer 4

나는 할 것이다 다음은 같은 VAR에 JQuery와 객체를 저장하는 경우

$(".addbutton").click(function() { 
      var addbuttonNode = $(this); 
      addbuttonNode.attr('disabled',true); 
      $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' }) 
       .done(function (data) { 
        $(addbuttonNode).next().next().append(data); //find better way of doing this 
        addbuttonNode.attr('disabled',false); 
       }); 
     });