.click() execute does not work in mozilla firefox

Question

I have this simple piece of code that for some reason works on all browsers except for Mozilla.

This is my HTML:

<img src="{{#asset}}menu_button.svg{{/asset}}" id="menu_button"></img>
<img src="{{#asset}}exit.svg{{/asset}}" id="exit"></img>

Here is my code:

$(document).ready(function(){
    $("#menu_button").click(function(event){
    show();      
    });
    $("#exit").click(function(event){
    hide();      
    });
});   

function show(element){
      event.preventDefault();
    $('#background_mobile_portrait').addClass('blur');
    $('#background_mobile_landscape').addClass('blur');
    $('.links').css('opacity', '1');
    $('#menu_button').css('opacity', '0');
    $('#exit').css('opacity', '1').css('z-index', '999');

}        


function hide(){
      event.preventDefault();
         $('#background_mobile_portrait').removeClass('blur');
         $('#background_mobile_landscape').removeClass('blur');
         $('.links').css('opacity', '0');
         $('#exit').css('opacity', '0').css('z-index', '-1');
         $('#menu_button').css('opacity', '1');
      }        

When clicking on the image in Firefox, nothing happens. All other browsers works like a charm. I have been following this post that refer to problems with onclick execution: Div onclick event not called in Mozilla

I have applied the changes suggested but with no success.

Any ideas?

Thanks, Matan

Answer 1

Your issue is that you're not passing on the event object to the function.

It works in IE and chrome because they define a window.event. Firefox does not.

$(document).ready(function(){
    $("#menu_button").click(function(event){
        show(event);      
    });
    $("#exit").click(function(event){
        hide(event);      
    });
});

and then define the first parameter to each function to receive the event object.

function show(event) {
    // ...
}

function hide(event) {
    // ...
}

---

And FYI, you could do this instead:

$(document).ready(function(){
    $("#menu_button").click(show);
    $("#exit").click(hide);
});

Now this will be your element, and the first parameter will receive event.

Answer 2

Probably won't solve it, but in any case the image tag should be closed with a /> (or just. >) see How to close <img> tag properly?