바인드 해제 및 연결 해제

Question

나는 클릭시 상단에 닫기 버튼을 표시해야하며, 해당 닫기 버튼을 클릭하면 숨기고 그냥 원을 표시해야하는 원이 있습니다.

나는 그 작업을 반복해서 할 수 있어야합니다.

<div class="circle"><div class="close"></div></div>​ 

CSS는 :

.circle 
    { 
     background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Blue_circle_logo.svg/100px-Blue_circle_logo.svg.png"); 
     height: 100px; 
     width:100px;   
    } 
.circle .close 
    { display:none; 
     position:relative; 
     background: url("http://www.dlf-data.org.uk/images/icons/close-icon.png"); 
     height: 30px; 
     width:30px; 
     float: right; 

    } 

JS : 여기

$(".circle").click(function() { 


$(".close").fadeIn(); 
$(".circle").unbind("click"); 
}); 

$(".close").click(function() { 


$(".close").fadeOut(); 
$(".circle").bind("click"); 

});​ 

은 바이올린있다! 그것은 내가 원하는 것을한다. 그러나 두 번째 클릭을 허락하지 않는다!! http://jsfiddle.net/RaExx/1/

Answer 1

$(".circle").click(function() { 
    $(".close").fadeIn(); 
}); 

$(".close").click(function(e) { 
    e.stopPropagation(); 
    $(".close").fadeOut(); 
});​ 

Fiddle

Answer 2

문제는 원의 클릭을 다시 결합하는 당신의 시도가 결합하는 것을 functionatiy 말하지 않는다는 것입니다. 실행할 기능을 말하면서 "클릭 이벤트 바인딩"이라고 말하면됩니다. 먼저 원 클릭 이벤트 핸들러를 선언 한 다음 여러 번 바인딩 할 수 있습니다.

//Declare the event handler to use 
var circleClick = function() { 
    $(".close").fadeIn(); 
    $(".circle").unbind("click"); 
}; 

//Initital binding to circle click 
$(".circle").click(circleClick); 

//Bind close click 
$(".close").click(function() { 
    $(".close").fadeOut(); 
    //Re-binding to circle click 
    $(".circle").click(circleClick); 
});​ 

참고 : 이벤트의 이름 및 이벤트 핸들러 : 이벤트를 바인딩 바인딩 방법을 사용하여 2 개 매개 변수가 필요합니다. 대신에

:

$(".circle").click(circleClick); 

당신은 사용할 수 있습니다

$(".circle").bind("click", circleClick); 

Answer 3

를 jQuery를에서 .bind() 이벤트가 복잡합니다. 대신 .on() 이벤트를 사용하는 것이 좋습니다. jQuery를 1.7로서

http://api.jquery.com/bind/

는 CSTE 연구진() 메소드는 문서 이벤트 핸들러를 부착하기위한 바람직한 방법이다.

하면이

$(".circle").on("click", function() { 
    $(".close").fadeIn(); 
}); 

$(".close").on("click", function(event) { 
    event.stopPropagation(); 
    $(".close").fadeOut(); 
});​ 

http://jsfiddle.net/RaExx/4/