1

I want to show a box when a button is clicked and hide it when I click out of the box.

enter image description here

The code I did works in Chrome and IE, but it doesn't in Firefox (I tested only in these three browsers). Firefox console shows me ReferenceError: event is not defined.

  • $('.button.open_login .bb') is the button.
  • $('.button.open_login .panel_opened') is the panel.

Code:

$(document).click(function(){
    if(!$(event.target).closest('.button.open_login .panel_opened').length) {
        if (site.ui.other.loginbox.is(":visible")){
            site.ui.other.loginbox.fadeOut(150);
        }
        else {
            if ($(event.target).closest('.button.open_login .bb').length){
                site.ui.other.loginbox.fadeIn(150);
            }
        }
    }
});

Thank you

agustin
  • 2,187
  • 2
  • 22
  • 40
  • 5
    Have you tried `$(document).click(function(event){`? – j08691 Jul 14 '16 at 19:14
  • 1
    You should refer to the event object that is passed as parameter of the event handler function. The global Event object is deprecated and doesn't work in all browser. – Mario Santini Jul 14 '16 at 19:16
  • @j08691 ... I'm ashamed. If you want you can post it as an answer. It may be useful for another distracted like me. Thanks – agustin Jul 14 '16 at 19:17

1 Answers1

1

To refer to the event of the element being clicked you should pass a parameter to the click function, like:

$(document).click(function(event){
j08691
  • 204,283
  • 31
  • 260
  • 272