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, событие должно произойти first перед выполнением каких-либо проверок ...

РЕДАКТИРОВАТЬ:

Глядя на вашу 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");
});