jQuery - Remove on onClick

Question

동일한 기능으로 jQuery로 만든 요소를 ​​제거하는 데 문제가 있습니다.

사이드 패널을 열고 (패널을 제외한) 나머지 페이지에 적용되는 오버레이 요소를 만드는 jQuery 함수 (toggleClick)를 만들었습니다. 사용자가 오버레이를 클릭하면 패널을 닫고 오버레이 요소를 제거합니다. 내가 여기서 뭔가 잘못하고있는거야?

jQuery를 코드 : 나는 문제를 데 어디

jQuery(document).ready(function(){ 
    /* DEFINE TOGGLECLICK */ 
    $.fn.toggleClick=function(){ 
     var functions=arguments 
     return this.click(function(){ 
      var iteration=$(this).data('iteration')||0 
      functions[iteration].apply(this,arguments) 
      iteration= (iteration+1) %functions.length 
      jQuery(this).data('iteration',iteration) 
     }) 
    } 
    /* DEFINE APANEL ID */ 
    var aPanel = "#aPanel"; 
    /* DEFINE APANEL FUNCTIONALITY */ 
    jQuery('#apanel-fire,#aPanelOverlay').toggleClick(function() { 
     jQuery("body").addClass("active"); 
     jQuery(aPanel).addClass("active"); 
     jQuery("<div id='aPanelOverlay'></div>").appendTo(".page"); 
    }, function() { 
     jQuery("body").removeClass("active"); 
     jQuery(aPanel).removeClass("active"); 
     jQuery("#aPanelOverlay").remove(); 
    }); 
}); 

해당/* DEFINE APANEL 기능 * /입니다. 위의 모든 것은 toggleClick 함수와 aPanel 변수 ID를 정의하는 것입니다.

버튼을 클릭하면 아래에 표시된 문제의 실시간 버전을 볼 수 있습니다.

라이브 버전 :

http://iamaaron.com/alpha/

너무 감사합니다!

Answer 1

우선 jQuery('#apanel-fire,#aPanelOverlay').toggleClick으로 전화 할 때 나중에 첨부되어 있으므로 오버레이가 존재하지 않습니다. 따라서 클릭 핸들러가없고 클릭에 반응하지 않습니다.

초 (더 이상 중요하지 않음) return this.click(function(){은 각 요소에 클릭 핸들러를 연결합니다. jQuery(this).data('iteration',iteration)은 첫 번째 클릭시 #apanel-fire에 iteration을 저장합니다. 오버레이를 클릭하면 iteration은 여전히 ​​0이됩니다. 따라서 첫 번째 함수가 다시 호출됩니다.

업데이트 : 매우 간단한 해결책

function showOverlay() { 
     jQuery("body").addClass("active"); 
     jQuery(aPanel).addClass("active"); 
     jQuery("<div id='aPanelOverlay'></div>").appendTo(".page").click(hideOverlay); 
    } 
    function hideOverlay() { 
     jQuery("body").removeClass("active"); 
     jQuery(aPanel).removeClass("active"); 
     jQuery("#aPanelOverlay").remove(); 
    } 

    jQuery('#apanel-fire').click(showOverlay);