Why does my jQuery not work in IE6?

Question

I am designing a webpage and I am using jQuery.

The webpage makes use of AJAX. IE6 and lower versions do not show the page correctly. Even the AJAX code doesn't seem to work.

Code:

jQuery(document).ready(function($) {
    // hide all sub heading lists
    $("#content1").load("sub/image1.html");
    $("li[@id^='cont']").click(function(){
         var current_id=$(this).attr('id');
         switch(current_id){
             case 'content_1':$("#content1").load("sub/my.html");break;
             default:;
         } 
    });
});

The code works perfectly in IE7, IE8, Chrome and Firefox. In IE6 or below it does not work.

What am I doing wrong?

Answer 1

Just some ideas:

• Instead of jQuery(document).ready() , try using $(document).ready().

• The line: $("li[@id^='cont']") might be the one causing the issue in IE 6. It seems like you are just trying to select all the <li> items where the id starts with cont. Instead you can try to give all the <li>s a class such as contLi and then the code:

  $(".contLi") will select the same <li>s as before, and it may also work in IE 6.

Answer 2

I'm really not sure why it doesn't work, but you could try upgrading jQuery to version 1.3.

If you've already upgraded to 1.3, then your script will be failing because the @ before the attribute name was deprecated in jQuery 1.2. Take it out and see how that goes.

$("li[id^='cont']").click(function() { ...

Answer 3

It may be something to do with default:;. I've found in the past that ie6 sometimes doesn't like you leaving something empty when there should be something there, even if it's not technically incorrect.

So how about default: break;