e.preventDefault - e is not defined

Question

So I have this JS and when i run the code i get "e is not defined" - What am I missing?

$('ul.result-filters > li a').click(toggleFilters());

function toggleFilters(e) {
   e.preventDefault();
   //do more stuff
}

Answer 1

Use this :

$('ul.result-filters > li a').click(toggleFilters);

You were passing the result of toggleFilters() instead of passing the function itself.

Answer 2

$('ul.result-filters > li a').on('click', toggleFilters);

function toggleFilters(e) {
   e.preventDefault();
   //do more stuff
}

When adding the parenthesis after the function it's executed immediately and the results are passed back. To just reference the function and call it on click, drop the parenthesis.

This would also make the event available to the toggleFilters function!

Answer 3

You are calling function instead of passing handler name to click. Remove the parenthesis from toggleFilters()

Change

$('ul.result-filters > li a').click(toggleFilters());

To

$('ul.result-filters > li a').click(toggleFilters);

Answer 4

Can always do e = e || window.event e = e || window.event to ensure you have the event.

Answer 5

You need to use the function name instead of function call toggleFilters().

$('ul.result-filters > li a').on('click', toggleFilters);

function toggleFilters(e) {
 e.preventDefault();
//do more stuff
}

Thanks