綁定和解除綁定切換

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); 
});​ 

注： 使用綁定方法綁定事件需要兩個參數：事件的名稱，事件處理程序。

在代替：

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

你可以使用：

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

Answer 3

在jQuery中的.bind（）事件是累贅。建議使用.on（）事件。

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

在jQuery 1.7中，。對（）方法是用於事件處理程序安裝到一個文件的優選方法。

嘗試像這樣

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

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

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