为什么 jQuery 就绪事件处理程序不起作用？答案

【问题标题】：Why jQuery ready event handler doesnt work?为什么 jQuery 就绪事件处理程序不起作用？
【发布时间】：2013-12-12 14:57:30
【问题描述】：

当我尝试时

$(document).ready(function() { alert("TEST");});

什么都没有发生，但是当我尝试时

$(window).load(function() { alert("TEST");});

所有作品。由于load() 作品的事实意味着我的jQuery 文件引用是正确的。

所以任何人都可以告诉我为什么这不起作用？

我的 HTML 标记是：

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/general_styles.css">
    <title></title>
</head>
<body>
    <div id="container">
        <div id="header">
            <img src="img/loginlogo.png"/>
            <h1>PRINSEAPALS</h1>
            <h3>MARINE SERVICES</h3>
            <p>"We deeply believe in the common good of all involved in making ships safer and seas cleaner."</p>
        </div>
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Services</a>
                    <ul>
                        <li><a href="#">Fire Extinguishers</a></li>
                        <li><a href="#">Immersion Suits</a></li>
                        <li><a href="#">Breathing Apparatus</a></li>
                        <li><a href="#">Liferafts</a></li>
                        <li><a href="#">Lifeboats</a></li>
                        <li><a href="#">Fixed CO<sub>2</sub> Systems</a></li>
                        <li><a href="#">Foam Analysis</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        <div id="slider">   
            <img id="img1" src="img/fire-extinguishers.jpg" />
            <img id="img2" src="img/immersion-suit.jpg">
            <img id="img3" src="img/breathing-apparatus.jpg">
            <img id="img4" src="img/liferaft.jpg">
            <img id="img5" src="img/lifeboat.jpg">
            <img id="img6" src="img/fixed-co2.jpg">
            <img id="img7" src="img/foam analysis.jpg">
        </div>
        <footer>
            <ul>
                <li><a href="#">Lifeboats</a></li>
                <li><a href="#">Lifeboats</a></li>
                <li><a href="#">Lifeboats</a></li>
            </ul>
        </footer>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
</body>
</html>

更新：介于

<script type="text/javascript" src="js/jquery.js"></script>

和

<script type="text/javascript" src="js/slider.js"></script>

我还有一个文件：

<script type="text/javascript" src="js/IE6.js"></script>

其中包含：

$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
    $('li').has('ul').mouseover(function(){
        $(this).children('ul').css('visibility','visible');
        }).mouseout(function(){
        $(this).children('ul').css('visibility','hidden');
        })
  }
});

根据我的 Firefox Web 控制台，我收到以下 2 个错误：

错误： http://example.com/js/jquery.js 正在分配一个 //# sourceMappingURL，但已经有一个

TypeError: $.browser 未定义

当我删除中间文件 .ready() 工作时。

【问题讨论】：

window.load 将在您的 DOM 加载后加载。但是 document.ready 是在加载 DOM 之前加载的
这可能对你有帮助....stackoverflow.com/questions/5182016/…
@Illaya 我想我可以理解这两者之间的区别，但仍然因为我们谈论的是单个警报不应该 .ready();也在工作吗？ .ready();不工作意味着什么？
@StefanosVakirtzis 确定它必须工作。

标签： jquery

【解决方案1】：

$(document).ready(function() {
    // executes when HTML-Document is loaded and DOM is ready
    alert("document is ready");
});

$(window).load(function() {
    // executes when complete page is fully loaded, including all frames, objects and images
    alert("window is loaded");
});

当然，如果您调用放置在结束 </body> 标记旁边的函数，则与在 <head> 部分中使用 $(document).ready(function(){}); 相同。

【讨论】：

你的回答比我的好。建议您编辑添加提示：.ready() 应尽可能放在 DOM 的末尾。

【解决方案2】：

试试这个.....这可能有用。

<html>

<script>
    $(document).ready(function() { alert("TEST");}); 
</script>
</head>
<body>
<div id="container">
    <div id="header">
        <img src="img/loginlogo.png"/>
        <h1>PRINSEAPALS</h1>
        <h3>MARINE SERVICES</h3>
        <p>"We deeply believe in the common good of all involved in making ships safer and seas cleaner."</p>
    </div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Services</a>
                <ul>
                    <li><a href="#">Fire Extinguishers</a></li>
                    <li><a href="#">Immersion Suits</a></li>
                    <li><a href="#">Breathing Apparatus</a></li>
                    <li><a href="#">Liferafts</a></li>
                    <li><a href="#">Lifeboats</a></li>
                    <li><a href="#">Fixed CO<sub>2</sub> Systems</a></li>
                    <li><a href="#">Foam Analysis</a></li>
                </ul>
            </li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    <div id="slider">   
        <img id="img1" src="img/fire-extinguishers.jpg" />
        <img id="img2" src="img/immersion-suit.jpg">
        <img id="img3" src="img/breathing-apparatus.jpg">
        <img id="img4" src="img/liferaft.jpg">
        <img id="img5" src="img/lifeboat.jpg">
        <img id="img6" src="img/fixed-co2.jpg">
        <img id="img7" src="img/foam analysis.jpg">
    </div>
    <footer>
        <ul>
            <li><a href="#">Lifeboats</a></li>
            <li><a href="#">Lifeboats</a></li>
            <li><a href="#">Lifeboats</a></li>
        </ul>
    </footer>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</body>
</html>

【讨论】：