Jquery 不能在 IE7 中运行？答案

【问题标题】：Jquery isn't working in IE7?Jquery 不能在 IE7 中运行？
【发布时间】：2015-08-13 12:02:52
【问题描述】：

好的，所以我正在尝试制作链接列表，并根据您选择的链接显示不同的 div 容器。我想要它，所以一次只显示一个 div。我有代码，它可以按我的意愿工作，但是，当我在 IE 中加载它时，它就不起作用了。我听说日志在其中发挥了作用。如何使此代码与 IE 兼容，或者如果您有其他可行的解决方案，我也愿意听到它。

我的代码：

    <head>
    <title>Example</title>
    </head>
    <body>

    <!--Footer and Navigation Div's-->
    <div id="bg"><img src="images/bg.jpg" alt=""></div>
        <div id="footer">
            <p><span>Menu</span></p>
                <div id="nav">
                    <ul><a href="#">Link 1</a></ul>
                    <ul><a href="#">Link 2</a></ul>
                    <ul><a href="#">Link 3</a></ul>
                    <ul><a href="#">Link 4</a></ul>
                </div>
        </div>

    <!--END Footer and Navigation Div's-->

    <div class="parent">
        <div class="a">
            <p>this is a</p>
        </div>   
        <div class="b">
            <p>this is b</p>
        </div>
        <div class="c">
            <p>this is c</p>
        </div>
        <div class="d">
            <p>this is d</p>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    $('.parent  div').hide();

    $('#nav a').click(function() {
        console.log($(this).index('a'));
        var $div = $('.parent > div').eq($(this).index('#nav a'));
        $div.show();
        $('.parent > div').not($div).hide();
    });
    </script>
    </body>
    </html>

【问题讨论】：

当它没有按您预期的方式工作时，您会观察到什么？
你还应该提到IE版本
你也应该使用更新版本的jquery，1.4.2已经很老了
当我在 IE 7 中打开它时，它已经显示了所有的 div。单击链接或 Chrome 和 Firefox 中的任何内容时，链接不会更改，页面会加载链接，当您单击链接时，它会显示相应的 div 容器，一次只打开一个。
尝试删除 console.log - console 不是 IE7 中的对象

标签： javascript jquery internet-explorer internet-explorer-7

【解决方案1】：

这是您应该了解的关于 jQuery 的第一件事。始终使用 $(document).ready... 示例：

<script>
    $(document).ready(function() {
        $('.parent  div').hide();

        $('#nav a').click(function() {
            console.log($(this).index('a'));
            var $div = $('.parent > div').eq($(this).index('#nav a'));
            $div.show();
            $('.parent > div').not($div).hide();
        });
    });
</script>

【讨论】：

由于他们的 javascript 在文档末尾，$(document).ready 在这里无关紧要
可能是评论
请详细说明为什么不重要？此脚本开始运行时会加载 DOM，但整个页面仍在加载中。
当 jQuery 位于页面底部时，不需要使用 dom 就绪（因为页面已经加载了）。没有任何迹象表明这可以解决 IE7 中的问题。

【解决方案2】：

试试

$('#nav a').live('click',function() {

或

$('#nav a').bind('click',function() {

【讨论】：

我应该把它放在哪里？这是我第一次使用 Jquery。
$('#nav a').live('click',function() {
.live 已过时，将被弃用。不要使用它。
你应该扩展你的答案并解释为什么，这样提问者才能真正获得知识，而不是学习只是复制粘贴一些东西直到它起作用。
感谢您发布此问题的答案！在 Stack Overflow 上不鼓励仅使用代码的答案，因为没有上下文的代码转储无法解释解决方案的工作方式或原因，这使得原始发布者（或任何未来的读者）难以理解其背后的逻辑。请编辑您的问题并包含对您的代码的解释，以便其他人可以从您的回答中受益。谢谢！