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

Question

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

以下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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sho*_*og9 15

原因:

根据MSDN,更改事件是

...在提交内容时触发,而不是在值发生变化时触发.例如,在文本框中,在用户键入时不会触发此事件,而是在用户通过保留具有焦点的文本框提交更改时触发.

复选框的行为类似:在IE中,事件不会触发,直到从元素中移除焦点(尝试它:单击然后选中复选框,行为与预期一致).Firefox显然不尊重这种区别.

解:

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

cLF*_*aVA 5

请记住,在选中复选框后会触发onchange事件,然后保留复选框.您是否尝试检查它,然后单击文档上的其他位置？

您可能希望在jQuery中使用click和keypress事件(通过单击和空格键检查框).

<sidequestion>你有没有理由在你的文档准备段落中声明/定义一个函数,而不是在它之外？</sidequestion>

还有一个编辑; 我可以推荐这个更时尚的代码:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	17 年前
查看次数：	14964 次
最近记录：	17 年前