jQuery only working in Firefox - event model issue?

Question

Hi

I'm no jQuery expert but managed to get the effects running I required for my WordPress site frontpage at http://www.bringmyshuttle.com

View in FF and all works fine; the other filters reset to 'all' when one option is selected, and the correct thumbs are faded out/retained.

In IE or Safari, nothing... I built on FF and Safari on Mac localhost, I am sure it was working for Safari at at least some point... IE I expect to be difficult but not the 'decent' browsers.

But as I say, very new to Javascript/jQuery and sure I'm making a basic mistake..but read also that each browser has different event modules.. eeesh, CSS hacking bad enough, is it as much of a pain in JS development too?

Here's the js I'm using. If anyone can point me in the right direction, oh would I be grateful because this one's melting my brain :)

$(document).ready(function() {

    $("select").each( function(){
        $(this).val( $("#" + $(this).attr("id") + " option:first").val() );
    });

    $('ul.filter option').click(function() {
        $(this).css('outline','none');
        $('ul.filter .current').removeClass('current');
        $(this).parent().addClass('current');

        $("select:not('.current')").each( function(){
            $(this).val( $("#" + $(this).attr("id") + " option:first").val() );
        });

        var filterVal = $(this).text().toLowerCase().replace(' ','-');
        var filterWp = 'category-'+filterVal;

        if(filterWp == 'category-all') {
            $('div.post').animate({opacity: 1})
                         .removeClass('unselected')
                         .addClass('selected');
        } else {
            $('div.post').each(function() {
                if(!$(this).hasClass(filterWp)) {
                    $(this).animate({opacity: 0.2})
                           .removeClass('selected')
                           .addClass('unselected');
                } else {
                    $(this).animate({opacity: 1})
                           .removeClass('unselected')
                           .addClass('selected');
                }
            });
        }
        return false;
    });
});

Answer 1

I don't think IE supports option click?

Try changing $('ul.filter option').click to $('select').change.

You will need to change the reference of this inside the change function as now it will refer to the select box not the option itself.