绑定和取消绑定切换

Question

我有一个圆圈，点击它应该会在top.and上显示一个关闭按钮，当关闭按钮被单击时，它应该隐藏起来，只显示圆圈。

我应该能够一次又一次地做这个手术。

<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

问题是，您尝试重新绑定单击圆圈的尝试并不能告诉您要绑定什么功能。你只需要说“绑定一个点击事件”，而没有说明要执行什么功能。您可以做的是首先声明圆单击事件处理程序，然后可以多次绑定它。

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

注意:使用bind方法绑定事件需要两个参数:事件名称和事件处理程序。

而不是：

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

您可以使用：

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

Answer 3

在jQuery中，.bind()事件很麻烦。建议改用.on()事件。

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

从jQuery 1.7开始，.on()方法是将事件处理程序附加到文档的首选方法。

像这样试一下

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

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

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