Jquery how to trigger function if clicked?

Question

I am trying to create a simple error message that should disapear on page click.

Here is my Jsfiddle: http://jsfiddle.net/ZKgWR/1/

I want to hide the .super message when clicked on the page, when the message is visable.

Here is my 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();
    });
}

The problem is that this part of the code is not working:

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

Nothing appends when clicking on .error because of the function is also active when the .super is invisable.

You need to clarify your question a bit. See also http://stackoverflow.com/questions/178325/how-do-you-test-if-something-is-hidden-in-jquery — ustun, Oct 15 '11 at 21:34
Not entirely clear on your code, but it looks like you need :visible, not show(). ie - if ($('.error:visible)){ } http://api.jquery.com/visible-selector/ — Gregg B, Oct 15 '11 at 21:37
The problem is that when clicking on the link with the .error class the div .super is not showing because of the function for document click is triggered and the super div is hidden. The document click which hides the super div should only be active when the super div is visable. — Rails beginner, Oct 15 '11 at 21:38

Haroon · Accepted Answer · 2011-10-15T22:12:47.993

0

Why not add a class called active or 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();
});

Your error was in the if statement, an event must occur first before doing any checks...

EDIT:

Looking at your js fiddle I realised the mistake I made, it should be e.stopPropogation, here is a full working code:

$(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");
});

edited Oct 15 '11 at 22:12

answered Oct 15 '11 at 21:34

Haroon

3,292
6
39
73

Can you show my how to hide the .super on page click only when it is visable? And why should I use a class called active or visable? – Rails beginner Oct 15 '11 at 21:36
updated my answer, why you should use a class? it makes it easier to check if something is active, plus the class could have some css styles attached to it, I use this method all the time... @Rails beginner - make sense? – Haroon Oct 15 '11 at 21:38
it is not working the div is not showing on click. I think it is because of if($('.super').hasClass("active")) is actived at the same time as clicking on the element. – Rails beginner Oct 15 '11 at 21:44
@Railsbeginner - see updated code, I have added .show(), when you are doing e.preventDefault() events dont propogate up to the document, so this document click event will never occur... – Haroon Oct 15 '11 at 21:45
still the div is not appearing onclick. You are also missing {} in the if statement – Rails beginner Oct 15 '11 at 21:51
you dont need {} it, but yes you can add it if you want... try: $('.super').show().addClass("active"); and see if it works if you have firefox you can check the dom if it appears, if you have firebug you can also use *console.debug("showing div")* – Haroon Oct 15 '11 at 21:56

Jquery how to trigger function if clicked?

1 Answers1