jQuery 崩溃 IE 9答案

【问题标题】：jQuery crashing IE 9jQuery 崩溃 IE 9
【发布时间】：2012-03-19 16:19:41
【问题描述】：

为了重现错误，我尽可能的剥离了代码，放到了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');
        }
    });

});

【问题讨论】：

IE 9 的 bug 到底是什么？ “单击复选框两次”？您的示例使用的是 jQuery 1.6.4； jQuery版本和这个有关系吗？
虽然 jsfiddle 等是一个不错的附件，但请务必在问题本身中发布相关代码/标记。为什么：meta.stackexchange.com/questions/118392/…
您认为为了帮助您解决该错误，我们必须知道该错误是什么的可能性有多大？你说它被报道并被接受了；太好了，给我们一根骨头，然后给我们链接或描述？是在勾选框吗？显示/隐藏内容？它是否与特定的 id 或 name 或 class 值有关？它只发生在隔周的星期一吗？当然，我们可以运行代码并煞费苦心地重复已经完成的工作以找到因果关系。或者你可以，你知道的，告诉我们。 :-)
通过上面的jsfiddle链接，在IE9中点击第二个复选框两次会崩溃。就像我上面说的
@Danny：你需要重新阅读上面的 cmets。

标签： jquery internet-explorer-9

【解决方案1】：

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

解决方案是：不要那样做。看起来在您的特定情况下，colspan 是这样您可以在类别之间放置一个hr。无论如何，这可能最好用 CSS 完成，例如：

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

...并删除不必要的行。 Like this.

【讨论】：

只是补充一下，正要发布同样的东西，但我花了一分钟才找到，因为你使用了可怕的“类别”一词重复。尝试更好地分解您的标识符
+1 仅用于“解决方案是：不要那样做。”让我想起 Herman Cain 说过“该分析的问题在于它不正确”。

【解决方案2】：

除了它在 IE9 中产生的错误之外，您还可以大大减少使用的代码：http://jsfiddle.net/MwS8K/59/

更新：是的，建议不要在表中使用 hr，反正语义不正确。

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

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

【讨论】：

出于同样的原因，代码/标记应该在问题本身中，而不仅仅是在其他地方的链接中，代码/标记应该始终在答案本身中，而不仅仅是在其他地方的链接中。请参阅问题评论中的链接了解原因。