Question

我尽可能地删除代码以重现错误并将其放在jsfiddle上：

单击第二个复选框两次会崩溃IE9。还会在Windows手机上崩溃IE9手机。

已向Microsoft报告并确认为错误（但不存在安全风险）。所以，现在正在寻找一种不同的解决方案。当使用jQuery单击一个复选框时，基本上要隐藏/显示表行。

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

jQuery崩溃了IE 9

2 个答案: