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小提琴，我意識到我犯的錯誤，應該是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");
});