jquery click function only works on first click in ie6

Question

I have a 'feature panel' consisting of a list of services and an image representing each service. Clicking on a h2 tag in the list removes the 'on' and 'noborder' class from all the li elements and should then apply those classes to the li element in which the h2 was clicked.

This works perfectly well in all browsers except ie6. In ie6 it decides to work for the first click, but not for subsequent clicks. Obviously I kinda need this to work on every click of a h2 tag. Any help would be greatly appreciated!

Here's the javascript:

$(document).ready(function(){
  $("#feature-list h2").click(function(){
    var $curr = $(this).parent();
    $("#feature-image").html('<img src="/images/feature/' + $(this).attr('title') + '.jpg" />');
    $("#feature-list li").removeClass('on');
    $("#feature-list li").removeClass('noborder');
    $curr.addClass('on');
    $curr.prev().addClass('noborder');
  });
});

Here's the CSS:

#feature-wrapper, #feature-title, #feature-image, #feature-list, #feature-tab { 
 color: #fff;
 float: left;
 height: 248px; }

#feature-wrapper { margin-bottom: 1em; }

#feature-title { 
 background-color: #455560;
 position: relative;
 width: 52px; }

#feature-image { width: 413px; }

#feature-tab { 
 background-color: #f7901e;
 width: 21px; }

#feature-list {
 background-color: #455560;
 background-image: url(/images/feature-list-bg.gif);
 background-position: top left;
 background-repeat: repeat-y;
 margin-left: 2px;
 width: 456px;
 height: 248px; }

#feature-list ul { margin: 0; }

.feature-list p {
 font-size: 1em;
 line-height: 1.2em;
 padding: 5px 15px;
 margin: 0;
 display: none; }

.feature-list li {
 margin: 0;
 list-style-type: none; }

.feature-list .on {
 background-color: #f7901e; }

.feature-list .on p {
 display: block;
 height: 43px;
 padding: 4px 15px; }

 .feature-list .on p.infolink {
  background-color: #f47a16;
  font-size: 0.9em;
  font-weight: bold;
  height: 13px;
  margin: 0;
  padding: 2px 15px 4px;
  text-align: right; }

 .feature-list .on p.infolink a { color: #fff; }

 .feature-list h2 {
  background-image: url(/images/feature-title-arrow.png);
  background-position: -50px 11px;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 2px 15px;
  font-size: 1.3em;
  font-weight: normal;
  border-bottom: 1px dotted #fff; }

 .feature-list li.on h2 {
  background-position: 0 11px;
  cursor: default;
  font-size: 2em;
  padding: 0 25px; }

And the HTML:

<div id="feature-wrapper">
  <div id="feature-title">
    <img src="/images/autodesk.gif" style="position: absolute; bottom: 5px; right: 5px;" />
  </div>
  <div id="feature-image">
    <img src="/images/feature/transport.jpg" />
  </div>
  <div id="feature-tab">
    <img src="/images/feature-tab.gif" style="margin: 5px;" />
  </div>
  <div id="feature-list">
    <ul class="feature-list">
      <li class="on">
        <h2 title="transport">Transportation</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="industrial">Industrial Machinery</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="oilgas">Oil &amp; Gas</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="renewables">Renewables</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="engineering">General Engineering</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="training">Process &amp; Power</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>                         
    </ul>
  </div>
</div>

Answer 1

works in ie6 for me, are there any other scripts included that could be conflicting?

Answer 2

Have you given the 'live' function ago? Instead of

$("div").click(function() {}); 

try

$("div").live("click", function() { });  

It attaches the event to all current and future instances of the element.