CODEWITHSUNDEEP
jqueryfirefoxtogglepreventdefault
fsylothian
fsylothian

Reputation: 91

event.preventdefault not working in Firefox

I am using the below bit of jQuery to toggle hidden divs. Working in all but Firefox and I know the error is (ReferenceError: event is not defined) but I'm not sure where to define the event so if anyone is able to help that would be great. Thanks in advance!

Each button is written as:

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-avon',this);">VIEW TYRES</a></div>

jQuery:

function toggle_visibility (id,el) {
    $('.btn_view a').html('VIEW PRODUCTS’);
    event.preventDefault();
    $('.price-text').show();
    $('.model-price-sm').show();
    var e = document.getElementById(id);
    if (e.style.display == 'block') 
    {
        e.style.display = 'none';
        $(el).html('VIEW ALL');
    }
    else 
    {
        e.style.display = 'block';
        $(el).html('HIDE PRODUCTS’);
        $(el).parent().parent().find('.price-text').hide();
        $(el).parent().parent().find('.model-price-sm').hide();
        //$(el).parent().prev('.price-text').hide();
    }

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.reveal');
    for (var i = lists.length; i--; ) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

Upvotes: 4

Views: 6964

Answers (3)

Ricardo de Assuncao Goncalves
Ricardo de Assuncao Goncalves

Reputation: 1129

Instead of using "event.preventDefault()" you could use "return false". It probably will solve your problem in Firefox.

Cheers

Upvotes: 3

Benno
Benno

Reputation: 3008

In FireFox, you can pass the event object in as a parameter e.g.:

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-avon',this, event);">VIEW TYRES</a></div>

function toggle_visibility (id,el, e) (then use e.preventDefault, just to make it separate to window.event in IE etc)

Although, as you are using jQuery, I would suggest doing what Sergio mentioned above/below.

Upvotes: 4

Sergio
Sergio

Reputation: 28837

You have a typo:

.html('VIEW PRODUCTS’); 
                    ^

and also same typo here .html('HIDE PRODUCTS’);

Apart from that its better to avoid inline script, so you could use:

$('.btn_view a').click(function(event){
    event.preventDefault();
    toggle_visibility (id,el)
});

Upvotes: 2

Related Questions