javascript - jQuery event.preventDefault() not working in Firefox (JSFiddle included)

Question

This is a kind of similar duplicate to some others here, but I think I'm using event.preventDefault() correctly in this case.

Here's a JSFiddle you can see the code with: http://jsfiddle.net/SeEw2/2/

Basically, click the Submit button.

In Chrome: Nothing happens - correct response.

In Firefox: Page reloads, oh noes!

So why is the page reloading in Firefox and not Chrome? I've been Firebugging it and no errors come up in either...

Answer 1

The variable event in your code is not initialized.

http://jsfiddle.net/SeEw2/4/

extract :

 $('#ajaxsearch').click(function(event) {

        // Stop the Search input reloading the page by preventing its default action
        event.preventDefault();

Answer 2

Ah I've had a similar problem in that past. Rather than event.preventDefault() try passing the event to:

    function ie8SafePreventEvent(e){
    if(e.preventDefault){ e.preventDefault()}
    else{e.stop()};

    e.returnValue = false;
    e.stopPropagation();        
}

I know it says IE, but I've never had a problem with it since =]

Answer 3

Instead of looking for a click event on the submit button, why not use the $(form).submit handler?

As long as you have 'return false' at the end of the handler, the page won't reload.

Answer 4

Because your not passing the event object like function(event), but my question is why even go through all this when you can make the type="button" and onclick pass the values? In essence that what your doing with this whole process.

Answer 5

I solved it this way, due my code is a little bit different this may be helpful for other people. My initial code looked like this.

<form id="enrollstudentform" onsubmit="return enrollStudents()">
    ...
</form>

My js function looked like

function enrollStudents() {
    // Stop Form.
    event.preventDefault();
    // Other code
}

I had to pass the parameter event in the function call and receive it in the function.

<form id="enrollstudentform" onsubmit="return enrollStudents(event)">
    ...
</form>

js code:

function enrollStudents(event) {
    // Stop Form.
    event.preventDefault();
    // Other code
}

I hope it helps.