CODEWITHSUNDEEP
jquerywordpressfirefox
Joseph Gregory
Joseph Gregory

Reputation: 589

JQuery .addClass function not working in Firefox

As you can see on my website ng1club.everythingcreative.co.uk I created an event changer script so as you click days of the week (Monday, Tuesday, Wednesday etc) the event changes and it works in all browsers except for Firefox. I can't see what the issue is

var Monday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Mondays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Monday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Monday\">";
        var Tuesday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Tuesdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Tuesday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Tuesday\">";
        var Wednesday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Wednesdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">#Midweek Madness<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"#Midweek Madness\">";
        var Thursday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Thursdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Thursday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Thursday\">";
        var Friday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Fridays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Friday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Friday\"><\/img>";
        var Saturday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Saturdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Saturday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Saturday\">";
        var Sunday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Sundays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Sunday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Sunday\">";

        jQuery( document ).ready(function( $ ) {

            $('.ng1_widget_event_nights ul li a').click( function(e) {
                event.preventDefault(); // prevent the default action
                event.stopPropagation(); // stop the click from bubbling
                $(this).closest('ul').find('.active').removeClass('active');
            });

            $( ".mon_click" ).click(function() {
                $(this).addClass("active");
                $(".ng1_widget_event").hide().html(Monday).fadeIn('slow');
            });
            $( ".tue_click" ).click(function() {
                $(this).addClass("active");
                $(".ng1_widget_event").hide().html(Tuesday).fadeIn('slow');
            });
            $( ".wed_click" ).click(function() {
                $(this).addClass("active");
                $(".ng1_widget_event").hide().html(Wednesday).fadeIn('slow');
            });
            $( ".thu_click" ).click(function() {
                $(this).addClass("active");
                $(".ng1_widget_event").hide().html(Thursday).fadeIn('slow');
            });
            $( ".fri_click" ).click(function() {
                $(this).addClass("active");
                $(".ng1_widget_event").hide().html(Friday).fadeIn('slow');
            });
            $( ".sat_click" ).click(function() {
                $(this).addClass("active");
                $(".ng1_widget_event").hide().html(Saturday).fadeIn('slow');
            });
            $( ".sun_click" ).click(function() {
                $(this).addClass("active");
                $(".ng1_widget_event").hide().html(Sunday).fadeIn('slow');
            });
        });

Upvotes: 0

Views: 226

Answers (1)

Papouche Guinslyzinho
Papouche Guinslyzinho

Reputation: 5448

I'm getting an error of Event is not define. So I think it should be "e" or "Event."

 $('.ng1_widget_event_nights ul li a').click( function(e) {
                e.preventDefault(); // prevent the default action
                e.stopPropagation(); // stop the click from bubbling
                $(this).closest('ul').find('.active').removeClass('active');
            });

//original $('.ng1_widget_event_nights ul li a').click( function(e) { event.preventDefault(); // prevent the default action event.stopPropagation(); // stop the click from bubbling $(this).closest('ul').find('.active').removeClass('active'); });

Upvotes: 2

Related Questions