Question

I have a jQuery function that submits a form via menu navigation functions:

$(function () {
    $('#sidebarmenu1 a').on('click', function () {
        var url = $(this).attr('href');
        $('#myform').attr('action', url);
        $("#myform").submit();
        if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
    })
});

This section:

if (event.preventDefault) 
{ event.preventDefault(); } 
else 
{ event.returnValue = false; }

Prevents the default action of the sidebar button (I think – still new to this) i.e. to simply navigate to a page.

It is written in this way to keep IE happy, because preventDefault isn’t defined for IE (might be using incorrect terminology there, but IE doesn’t like preventDefault.)

However now this throws up an error in Firefox, because (as I read on other Stack questions) event is not globally defined for Firefox! I get the following error:

ReferenceError: event is not defined

Now according to this Stack question:
event is not defined in FireFox, but ok in Chrome and IE

In IE and Chrome, event is resolving to window.event. Firefox doesn’t have this property and instead provides an event to an event handler function by passing it as a parameter. jQuery abstracts this difference for you by providing an event object parameter in all browsers.

But I thought I was using jQuery here and am still getting the issue.

Sorry if I’m making basic mistakes, self teaching myself js and jQ. Any help much appreciated.

Answer 1

This should do..

$(function() {
    $('#sidebarmenu1 a').on('click', function(e) {
        var evt = e || window.event;
        var url = $(this).attr('href');
        $('#myform').attr('action', url);
        $("#myform").submit();
        evt.preventDefault();
    })
});​