如果单击，Jquery如何触发功能？

Question

我正在尝试创建一个简单的错误消息，该消息应在页面点击时消失。

这是我的 Jsfiddle：http://jsfiddle.net/ZKgWR/1/

我想在点击页面时隐藏 .super 消息，当消息可见时。

这是我的 jquery：

// show super on click
$('.error').click(function(e) {
    e.preventDefault();
    var position = $(this).position();
    $('.super').css({
        display: 'block',
        position: 'absolute',
        left: position.left + 50,
        top: position.top
    });
    var super = true
});


// If .error clicked then enable the function to remove the super message
if ($('.error').show()) {
    $(document).click(function() {
        $('.super').hide();
    });
}


// If .error clicked then enable the function to remove the super message
if ($('.error').show()) {
    $(document).click(function() {
        $('.super').hide();
    });
}

问题是这部分代码不起作用：

if ($('.error').show()) {
    $(document).click(function() {
        $('.super').hide();
    });
}

单击 .error 时不会附加任何内容，因为当 .super 不可见时，该功能也处于活动状态。

Answer 1

为什么不添加一个名为 active 或 visible 的类？

$('.error').click(function (e) {
e.preventDefault();
var position = $(this).position();
$('.super')
   .show()
  .css({display: 'block', position: 'absolute', left: position.left + 50, top: position.top})
.addClass("active");
});

$(document).click(function() {
   if($('.super').hasClass("active"))
     $('.super').removeClass("active").hide();
});

您的错误出现在 if 语句中，在进行任何检查之前必须首先发生一个事件...

编辑：

看着你的 js fiddle 我意识到我犯的错误，应该是 e.stopPropogation，这是一个完整的工作代码：

$(document).click(function(e) {
    if($('.super').hasClass("active"))
        $('.super').hide();
});

$('.error').click(function(e) {
    e.stopPropagation();
    var position = $(this).position();
    $('.super').fadeIn(250).css({
        display: 'block',
        position: 'absolute',
        left: position.left + 50,
        top: position.top
    }).addClass("active");
});