2012-05-16 4 views
3

컬러 박스 팝업 메뉴의 버튼에 jQuery 클릭 이벤트에 문제가 있습니다.jQuery에서 이벤트를 분리하고 새 이벤트를 첨부하는 방법

버튼은 다음

기본적으로 다음과 같은 이벤트가 붙어있다
<div id="popup"> 
    <button class="close_bu">Close</button> 
</div> 

: 내가 또 다른 이벤트가 발생하면

jQuery('.close_bu').bind('click',function(){   
      jQuery.colorbox.close(); 
}); 

내가 기본 동작을 변경하려면 다음 작업을 수행 할 수 있도록 :

jQuery('#anotherpopup').on('click','.deleteplan_button',function(){ 

      jQuery('#popup .close_bu').addClass('returnBack'); 
      jQuery('#popup .returnBack').removeClass('close_bu'); 

      jQuery.colorbox({inline:true , href:"#popup", opacity: 0.6, width: "600px"}); 
return false; 
     }) 

하는 I는 추가 한 :

jQuery('#popup').on('click','.returnBack',function(){ 
       e.preventDefault(); 
       //Do something 
}) 

.returnBack에 연결된 새 이벤트가 작동하지 않습니다. 버튼을 클릭하여 닫기 이벤트를 발생시키는 경우 버튼에 .close_bu 클래스가 더 이상 존재하지 않아도 해당 이벤트가 계속 발생합니다.

은 임 조금 혼란 : S

답변

2

을 코드에서 ID를 popup에 어떤 요소가 없습니다. 따라서 jQuery('#popup')은 아무 것도하지 않거나 코드의 중요한 부분을 표시하지 않았습니다.

업데이트 :

당신은 당신이 당신이 이벤트에 묶을 할 요소를 선택 '#popup .close_bu'하여 클래스

$('#popup .close_bu').unbind('click'); 

을 제거하는 대신 .unbind()를 사용할 필요가, 또는이 경우합니다 사건에서 해고. jQuery CSS 선택기는 CSS처럼 보입니다. 이벤트와 핸들러 사이의 연결은 CSS를 사용하지 않습니다. 클래스 추가 및 제거의 모든 트릭은 다른 CSS 스타일을 트리거하는 것이며, 이는 엘레멘트의 모양 만 변경하지만 이벤트는 변경하지 않습니다.

+0

나는 버튼을 둘러싸고있는 div를 포함하지 않았다. 나는 나의 질문을 편집했다. 덕분에 – chifliiiii

+0

.unbind()를 사용해야합니다. 내 업데이트를 참조하십시오. – snies

+1

.on 및 .off 대신 bind를 사용하는 이유에 대해 혼란 스럽습니다. 귀하의 질문에 대답하지 않거나 어떤 식 으로든 도와주세요. 그러나 호기심을 만족 시키시겠습니까? – sngregory

관련 문제