代码之家  ›  专栏  ›  技术社区  ›  Gennady Shumakher

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

  •  8
  • Gennady Shumakher  · 技术社区  · 17 年前

    以下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>
    
    3 回复  |  直到 17 年前
        1
  •  15
  •   Community Mohan Dere    6 年前

    原因:

    根据MSDN change event 是

    …在提交内容时被触发 而不是在值改变时。 例如,在文本框上,此事件 在用户打字时没有被触发, 而是当用户提交 通过保留以下文本框进行更改 有焦点。

    复选框的行为类似:在IE中,只有从元素中移除焦点,事件才会触发(试试看:单击复选框,然后关闭标签,行为与预期一致)。Firefox显然不尊重这种区别。

    解决方案:

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

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

    …并且行为应该在浏览器之间保持一致。

        2
  •  5
  •   cLFlaVA    17 年前

    请记住,onchange事件已被触发 选中复选框然后保留复选框后 。你试过检查它,然后点击文档上的其他地方吗?

    你可能想雇佣 点击 而jQuery中的按键事件(用于通过单击和空格键选中该框)。

    <sidequestion> 您是否有任何理由在文档准备段落中声明/定义函数,而不是在其外部? </sidequestion>

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

    jQuery(document).ready(function(){
        $("#g_1").hide();
        $("#check").change(function() { $("#g_1").toggle(); });
    });
    
        3
  •  1
  •   Atta    17 年前

    将.Change事件更改为.click事件。两个浏览器中的结果是相同的。在IE中,当您单击复选框时,不会出现模糊。