jquery点击功能只适用于第一次点击ie6

Question

我有一个'功能面板'由服务列表和一个图像代表每项服务。点击列表中的h2标签会从所有li元素中删除'on'和'noborder'类，然后应用这些类到单击h2的li元素。

这在除ie6以外的所有浏览器中都能很好地工作。在ie6中，它决定为第一次点击而工作，但不适用于随后的点击。很明显，我需要这个工作，每次点击一个h2标签。任何帮助将不胜感激！

这里的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'); 
    }); 
}); 

这里的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; } 

和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

你有前给出的 '活' 的功能？取而代之的

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

尝试

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

它连接的情况下，以该元素的所有当前和未来实例。