jQuery的崩溃IE 9

Question

我剥离下来的代码尽可能重现该错误并把它放在的jsfiddle：

http://jsfiddle.net/MwS8K/1/

点击第二tickbox两次崩溃IE9。 Windows手机上的IE9手机也崩溃了。

这已报告给Microsoft并确认为错误（但不是安全风险）。所以，现在正在寻找不同的解决方案。基本上看，当用jQuery点击tickbox时隐藏/显示表格行。

<input checked="checked" class="Category1" id="Category1" type="checkbox"  value="true" /> 
<label for="Category1"> 
    Category 1</label> 
<br /> 
<input checked="checked" class="Category2" id="Category2" type="checkbox" value="true" /> 
<label for="Category2"> 
Category 2</label> 
<br /> 
<div class="product-table"> 
<table border="0" id="ProductTable"> 
    <tr> 
     <th> 
      Product Name 
     </th> 
     <th> 
      Action 
     </th> 
    </tr> 
    <tr class="Category1"> 
     <td> 
      Product1 
     </td> 
     <td class="call-to-action"> 
      View 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <hr /> 
     </td> 
    </tr> 
    <tr class="Category2"> 
     <td> 
      Product 2 
     </td> 
     <td class="call-to-action"> 
      View 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <hr /> 
     </td> 
    </tr> 
</table> 

.product-table table td.call-to-action { 
    border-top: 1px solid #DDD; 
} 

table { border-collapse: collapse; } 


$(document).ready(function() { 
    $("input:checkbox").live("click", function() { 
     if (this.checked) { 
      var category = "#ProductTable tr." + $(this).attr("class"); 
      $(category).show('fast'); 

     } else { 

      var category = "#ProductTable tr." + $(this).attr("class"); 
      $(category).hide('fast'); 
     } 
    }); 

}）;

Answer 1

根据实验，问题是在表格行上使用hide时，在colspan之后有一行。奇怪的错误。

解决方法是：不要这样做。它看起来像你的具体情况，colspan是这样，你可以在类别之间放置一个hr。这可能是更好的CSS做反正，例如：

.product-table tr.Category1 td, .product-table tr.Category2 td { 
    border-bottom: 1px solid #DDD; 
} 

...去除不需要的行。 Like this.

Answer 2

而且它产生在IE9就可以大大减少使用的代码中的错误：http://jsfiddle.net/MwS8K/59/

更新：与没错这就是不推荐使用表中的HR，语义上不正确反正。

更新2：那么这里是代码：

$(document).ready(function() { 
    $(":checkbox").live("click", function() { 
     $("#ProductTable tr." + $(this).attr('class')).toggle('fast'); 
    }); 
});