Internet Explorer 中的 jquery show()/hide() 问题？答案

【问题标题】：jquery show()/hide() problem in Internet Explorer?Internet Explorer 中的 jquery show()/hide() 问题？
【发布时间】：2008-12-15 15:57:37
【问题描述】：

以下 html 代码在 Firefox 中有效，但由于某种原因在 IE 中失败（Label2 未显示）。这是一个错误还是我错过了什么？

任何帮助将不胜感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
        </script>
        <script>
            jQuery(document).ready(function(){
                function setVis(){
                    var val = $("#check").is(":checked");
                    if (val) 
                        $("#g_1").show();
                    else 
                        $("#g_1").hide();
                }

                setVis();
                $("#check").change(setVis);
            });
        </script>
    </head>
    <body>
        <span>
            <input type="checkbox" id="check" />
            <label>Label1</label>
        </span>
        <span id="g_1">
            <label>Label2</label>
        </span>
    </body>
</html>

【问题讨论】：

标签： jquery internet-explorer

【解决方案1】：

原因：

根据 MSDN，change event 是

...提交内容时触发而不是在价值发生变化时。例如，在文本框中，此事件在用户键入时不会触发，而是当用户提交通过离开文本框进行更改有焦点。

复选框的行为是相似的：在 IE 中，事件不会触发，直到焦点从元素中移除（尝试一下：单击然后从复选框中跳出标签，行为符合预期）。 Firefox 显然不尊重这种区别。

解决办法：

使用click 事件处理程序而不是change：

            $("#check").click(setVis);

...并且跨浏览器的行为应该是一致的。

【讨论】：

大多数人认为这是 IE 中的错误：webbugtrack.blogspot.com/2007/11/… 只要在单选集（或复选框）中进行选择，值就会改变。恕我直言，IE 是唯一不能正确处理此问题的浏览器。

【解决方案2】：

请记住，onchange 事件是在您选中复选框然后离开复选框后触发的。您是否尝试检查它，然后单击文档上的其他位置？

您可能希望在 jQuery 中使用 click 和 keypress 事件（用于通过单击和空格键检查框）。

<sidequestion>你有什么理由在你的文档就绪段落中声明/定义一个函数，而不是在它之外？</sidequestion>

再编辑一次；我可以推荐这个更时尚的代码吗：

jQuery(document).ready(function(){
    $("#g_1").hide();
    $("#check").change(function() { $("#g_1").toggle(); });
});

【讨论】：

感谢您的帮助，您获得了我的投票。我通过剥离真实的（更复杂的）代码发布了 html 代码，这就是为什么它不是最好的形状。但我仍然看到您的建议的价值。

【解决方案3】：

将 .change 事件更改为 .click 事件。两个浏览器的结果是一样的。在 IE 中单击复选框时，没有发生模糊。

【讨论】：

如果在页面加载（通过 cookie 或其他方式）时选中该框，则可能会出现问题。