Question

I had a click function with jquery which didnt work until I added the ‘event’ (see below).

When is the event needed? This documentation doenst use it: http://api.jquery.com/click/

Didnt work:

$(document).ready(function () {
        $('#div a').click(function () {
            event.preventDefault();
            $('#menu,#wrapper').toggleClass('open');
        });
    })

Works:

$(document).ready(function () {
        $('#div a').click(function (event) {
            event.preventDefault();
            $('#menu,#wrapper').toggleClass('open');
        });
    })

Answer 1

The documentation you link to precises that the click function is a shortcut for bind with eventType being "click". Here’s an extract of this documentation :

.bind( eventType [, eventData], handler(eventObject) )

The prototype of the bind function shows that handler, the callback you provide, receives an eventObject, which is the event you have in your code.

This event is a jQuery wrapped event, having the function you call, preventDefault.

So this line

event.preventDefault();

needs the event to be defined. Writing function(event) in the declaration of your function declares the local variable event whose value will be the one of the eventObject given by jQuery.

Alternatively, if you don’t like defining variables, you could do this :

$(document).ready(function () {
    $('#div a').click(function () {
        $('#menu,#wrapper').toggleClass('open');
        return false; // this prevents default handling and also stops propagation
    });
})