Jquery crashing on IE7

Question

HTML:

<div id="overlay_weekPrize"> 
    <div class="prizePopupBanner">

    </div>
  <div id="weeklyPrizeImageBanner"><!--the big banner images/weeklyPrizeImageBanner-->
    <div id="week1"><img src="images/bts/bts_overlay_weekly_prize_week1.png" alt="week prize"  /></div>
    <div id="week2" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week2.png" alt="week prize"  /></div>
    <div id="week3" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week3.png" alt="week prize"  /></div>
    <div id="week4" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week4.png" alt="week prize"  /></div>
    <div id="week5" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week5.png" alt="week prize"  /></div>
  </div>
  <div id="weeklyPrizeBlocksWrapper"><!--the outer vector box-->
    <ul id="weeklyPrizeBlockThumb">
      <li class="active"> <img src="images/bts/bts_overlay_wp_box_thumbw1_active.jpg" alt="Week1" id="week1" />
        <p class="text"> </p>
      </li>
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw2_active.jpg" alt="Week2" id="week2" />
        <p class="text"> </p>
      </li>
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw3_active.jpg" alt="Week3" id="week3" />
        <p class="text"> </p>
      </li>
    </ul>
    <ul id="weeklyPrizeBlockThumb">
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw4_active.jpg" alt="Week4" id="week4" />
        <p class="text"> </p>
      </li>
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw5_active.jpg" alt="Week5" id="week5" />
        <p class="text"> </p>
      </li>
    </ul>
    </ul>
  </div>

JavaScript:

 var currentID=$('div#weeklyPrizeActiveBlock').find('span').html();
   $('#weeklyPrizeImageBanner div').hide(); // Hide All Banner DIV's
   $('#weeklyPrizeImageBanner').find('div[id^='+currentID+']').show(); 
   $('ul#weeklyPrizeBlockThumb li').removeClass('active');
   $('ul#weeklyPrizeBlockThumb').find('li[id^='+currentID+']').addClass('active');
   var activePrize=$("div#weeklyPrizeActiveBlock").find('img[id^='+currentID+']').attr('src');
   $('ul#weeklyPrizeBlockThumb li').find('img[id^='+currentID+']').attr("src", activePrize);

    $('ul#weeklyPrizeBlockThumb li').click(function()
    {
    $('ul#weeklyPrizeBlockThumb li').removeClass('active'); //Remove Class Active from LI
        $(this).addClass('active'); //Active Image Thumb
        var imgID = $(this).find('img').attr('id'); //Find Thumb Image ID
        $('#weeklyPrizeImageBanner div').hide(); // Hide All Banner DIV's
        $('#weeklyPrizeImageBanner').find('div[id^='+imgID+']').show(); //Show Current Banner
        var activeSrc=$('div#weeklyPrizeActiveBlock').find('img[id^='+imgID+']').attr('src');

        $("div#weeklyPrizeInActiveBlock>img").each(function(index){
           var k= $(this).attr('src');
            index1="week"+index;
          $('ul#weeklyPrizeBlockThumb li').find('img[id^='+index1+']').attr('src',k);

        })
        $(this).find('img').attr("src", activeSrc);

    }
    );

What is happening is. The jQuery is not working on the second set of lis. They don't respond to the click. This is only happening on IE7. Rest of the browsers are working absolutely fine.

EDIT: I tried changing the id to class. but it still didn't work. I tried changing the name of the second id and reconfiguring the script. Still didn't work. The problem lies somewhere else.

Answer 1

First of all, you really should correct your markup by dropping those duplicate IDs. Then add var to index1 = "week" + index;

That's it.

See more about the issue here: http://ragrawal.wordpress.com/2007/10/25/top-5-reasons-why-ie7-is-complaining-about-your-javascript/

Answer 2

Your code uses one id on multiple elements. This will make the browser behave undefined. Please make your HTML validate, then it will probably work.