爲什麼我需要將$（document）.ready添加到自動執行的函數中？

Question

我只是搞了一些JavaScript，我遇到了一些讓我困惑的東西。

我已經添加了一個鏈接到一個腳本文件到文檔頭，就在鏈接到jQuery之後。

如果我把在測試文件：

(function($){ 


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


})(jQuery); 

鼠標懸停事件不會觸發功能。

不過，如果我添加

(function($){ 

$(document).ready(function(){ 

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

}); 
})(jQuery); 

事件確實工作。

難道僅僅是沒有$（document）.ready的DOM在我的自動執行函數運行的時候沒有完成加載，所以沒有什麼東西需要附加函數或者是否有另一種解釋？

Answer 1

我添加了一個鏈接到一個腳本文件到

文檔這是該點的頭。

通常人們將腳本文件放在文檔的頁腳中以優化加載頁面的過程，因此不需要等待文檔準備好基於已經加載的DOM來執行某些操作（如果您處於頁腳，你已經加載了其餘部分 - 除非你有一些內容加載異步）。

嘗試將腳本文件放在頁腳中，並且不需要$（document）.ready。

摘要：在你的情況下，你需要它，因爲當腳本開始執行時，你還沒有開始尋找DOM，並且在那個時候找不到元素。

Answer 2

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

它等待整個HTML節選形象。
有些時候你發現，你recived錯誤「$ is not defined.」那麼在這種情況下 您可以使用$(document).ready()

Answer 3

這是因爲文件準備好等待，直到該文件在執行之前完全加載。

任何綁定到DOM元素的東西必須在文檔完全加載時完成，否則這些事件處理程序綁定將嘗試綁定到尚不存在的DOM元素。

所以是的，你回答了你自己的問題。

Answer 4

你可以只移動$，使其工作

$(function(){ 


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


}); 

Demo

說明$(function(){});相當於$(document).ready(function(){}); jQuery中

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> 
} 

它基本上是立即執行功能。