jQuery add and remove classes not working IE8

Question

I am not the greatest at jQuery so forgive me if this is a simple question. I have created a nav menu active state function Click here for the demo

It works fine in Chrome, Firefox, Safari, however I notice in IE8 the class active is not appearing when I click on the links. Is there something incorrect in my jQuery?

$(document).ready(function () {
    $('.proBtn').click(function () {
        $('li').removeClass('active');
        $('li a').removeClass('blue');
        $(this).parent().addClass('active');
        $(this).parent().children('.proBtn').addClass('blue');
    });
});

Not much help, but i've just tried it in IE8 and it's working just fine. *edit* - This was with JQuery 1.10.1 — Matt, Sep 19 '13 at 11:36

score 0 · Answer 1 · answered Sep 19 '13 at 11:33

0

I don't have a working version of IE8 (the horror!).. But since your "this" is already the button you're clicking on, why not change the last line to this:

                $(this).addClass('blue');

As seen here (like I said: can not test it) : http://jsfiddle.net/vXmNU/1/

EDIT

Updated the fiddle to match the parent to the li: http://jsfiddle.net/vXmNU/2/

$(this).parent("li").addClass('active');

answered Sep 19 '13 at 11:33

Leon

919
6
21

If you take a look at this one: http://jsfiddle.net/vXmNU/3/ can you see an alert with an ID in it or just unknown / error? – Leon Sep 19 '13 at 11:48

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

After almost burning my head down:

Try to comment out all console.log Events. I'm running IE8 in a Virtual Machine and if i have any console.log Event triggered, the javascript will stop working. It will not run any other javascript code after the console.log.

So: Try to comment out / remove all console.log - It's a IE8 Bug, because earlier there was alert(); to debug things.

for digging deeper: What happened to console.log in IE8? (thanks to kamui)

edited May 23 '17 at 10:29

Community

1
1

answered Nov 14 '13 at 08:15

Patrick

162
2
11

you could add a link to the IE8 bug report. Otherwise it is just your, as a new user to stackoverflow, opinion. – Laurynas Mališauskas Nov 14 '13 at 08:40
There is another stackoverflow question on this console.log issue http://stackoverflow.com/questions/690251/what-happened-to-console-log-in-ie8 seems that the fix is to use alert() – kamui Nov 15 '13 at 12:55

score 0 · Answer 3 · 2016-09-05T16:13:33.607

This code snippet is based on your jsfiddle demo, but with sligtly improved CSS and JS. I dont have IE8, so try it on your own and let me know in comment.

Edit: I tested it myself. Its working in IE8. But maybe you will need click on "Allow blocked content" to run JS on your page.

// JavaScript code

$(function() {
  $('.proBtn').on('click', function() {
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
  });
});

/* CSS code */

body { background: #e8e8e8; }
ul { margin: 0; padding: 0; list-style: none; }
ul:after { content: ""; display: block; clear: both; }
ul li { float: left; width: 16.66%; }
ul li a:hover, ul .active a { background: #fff; color: #1d5ea8; }
ul li a {
  display: block;
  text-decoration: none;
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #6a6f75;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
  border-radius: 4px;
  transition: all 0.4s;
}

<!-- HTML code -->

<div id="wrapper">
  <div class="top-block">
    <ul>
      <li class="active"><a href="#" class="proBtn">Home</a></li>
      <li><a href="#" class="proBtn">Edit Profile</a></li>
      <li><a href="#" class="proBtn">Like'd</a></li>
      <li><a href="#" class="proBtn">Lists</a></li>
      <li><a href="#" class="proBtn">Followers</a></li>
      <li><a href="#" class="proBtn">Following</a></li>
    </ul>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQuery add and remove classes not working IE8

3 Answers3

Linked