Question

我只是搞乱了一些javascript而且我遇到了一些困扰我的东西。

在链接到jQuery之后，我已将脚本文件的链接添加到文档的标题中。

如果我放入测试文件：

(function($){


$("#thing").mouseover(function(){alert("woo");});


})(jQuery);

mouseover事件不会触发该功能。

但是，如果我添加

(function($){

$(document).ready(function(){

$("#thing").mouseover(function(){alert("woo");});

});
})(jQuery);

活动确实有效。

只是没有$（文档）。在我的自动执行函数运行时，DOM还没有完成加载，所以没有#thing尚未附加函数或是否有另一个函数解释

Answer 1

我已将脚本文件的链接添加到文档的标题中

这就是重点。

通常人们将脚本文件放在文档的页脚中以优化加载页面的过程，因此它不需要等待文档准备好基于已经加载的DOM执行某些操作（如果你在页脚，你已经加载了其余的 - 除非你有一些内容加载异步）。

尝试将脚本文件放在页脚中，您将不需要$（文档）.ready。

摘要：在您的情况下，您需要它，因为当脚本开始执行时，您还没有开始寻找DOM，并且在那段时间内找不到该元素。

Answer 2

$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute

等待整个HTML接受图片。
有时您注意到在那种情况下您收到了错误“$ is not defined.” 你可以使用$( document ).ready()

Answer 3

这是因为文档就绪等待文档在执行之前已完全加载。

任何绑定到DOM元素的东西必须在文档完全加载时完成，否则这些事件处理程序绑定将尝试绑定到尚不存在的DOM元素。

是的，你回答了自己的问题。

Answer 4

您可以移动$以使其正常工作

$(function(){


$("#thing").mouseover(function(){alert("woo");});


});

Demo

解释$(function(){});相当于jQuery中的$(document).ready(function(){});

Answer 5

文档就绪功能等待页面加载和然后执行那里的任何东西。这可以防止不成熟页面加载前的操作。作为一个拇指规则，请记住这一点，

$(document).ready(function(){

  //jQuery code goes here

});

Answer 6

显然这对我有用

<div id="body">
<section class="featured">
        <div class="content-wrapper">
...
        </div>
</section>
</div>

@section scripts{
    <script type="text/javascript">
    (function ($) {
        $(".featured").mouseover(function () { alert("woo"); });
    })(jQuery)();
    </script>
}

它基本上是一个立即执行的功能。

为什么我需要将$（document）.ready添加到自执行函数中？

6 个答案: