106

I've made a page for a client and I initially was working in Chrome and forgot to check if it was working in Firefox. Now, I have a big problem because the whole page is based upon a script that doesn't work in Firefox.

It's based on all "links" that have a rel that leads to hiding and showing the right page. I don't understand why this isn't working in Firefox.

For instance pages have the id #menuPage, #aboutPage and so on. All links have this code:

<a class="menuOption" rel='#homePage' href="#">Velkommen</a> 

It's working perfectly in Chrome and Safari.

Here is the code:

$(document).ready(function(){

//Main Navigation


$('.menuOption').click(function(){

  event.preventDefault();
  var categories = $(this).attr('rel');
  $('.pages').hide();
  $(categories).fadeIn();


});

// HIDES and showes the right starting menu
    $('.all').hide();
    $('.pizza').show();


// Hides and shows using rel tags in the buttons    
    $('.menyCat').click(function(event){
        event.preventDefault();
        var categori = $(this).attr('rel');
        $('.all').hide();
        $(categori).fadeIn();
        $('html,body').scrollTo(0, categori);

    });


}); 
2

2 Answers 2

138

You're declaring (some of) your event handlers incorrectly:

$('.menuOption').click(function( event ){ // <---- "event" parameter here

    event.preventDefault();
    var categories = $(this).attr('rel');
    $('.pages').hide();
    $(categories).fadeIn();


});

You need "event" to be a parameter to the handlers. WebKit follows IE's old behavior of using a global symbol for "event", but Firefox doesn't. When you're using jQuery, that library normalizes the behavior and ensures that your event handlers are passed the event parameter.

edit — to clarify: you have to provide some parameter name; using event makes it clear what you intend, but you can call it e or cupcake or anything else.

Note also that the reason you probably should use the parameter passed in from jQuery instead of the "native" one (in Chrome and IE and Safari) is that that one (the parameter) is a jQuery wrapper around the native event object. The wrapper is what normalizes the event behavior across browsers. If you use the global version, you don't get that.

1
  • Great thanks. meteor.js uses alot of event vars. function(){.... without passing event still works in chrome and safari. however firefox would fail. Mar 2, 2014 at 17:28
55

It is because you forgot to pass in event into the click function:

$('.menuOption').on('click', function (e) { // <-- the "e" for event

    e.preventDefault(); // now it'll work

    var categories = $(this).attr('rel');
    $('.pages').hide();
    $(categories).fadeIn();
});

On a side note, e is more commonly used as opposed to the word event since Event is a global variable in most browsers.

2
  • 3
    ... except in Firefox of course! It doesn't hurt to use the name "event" for the parameter, as it's not a reserved word or anything.
    – Pointy
    Dec 11, 2013 at 15:28
  • 1
    Very true, I guess I just picked up e from jQuery! @Pointy Dec 11, 2013 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.