我的代碼在$ document.ready中被調用，但似乎在加載DOM之前運行。 為什么？

Question

我的頭中有一個腳本，如下所示：

<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
    function editdoc(){
        document.getElementById("editme").innerHTML = "hello world";
    }

    $(document).ready(editdoc());
</script>

主體僅包含一個適當命名的div。

現在，當我將其傳遞給瀏覽器時，Chrome給了我Uncaught TypeError: Cannot set property 'innerHTML' of null錯誤的Uncaught TypeError: Cannot set property 'innerHTML' of null 。

如果我將此腳本移入正文或使用匿名函數，則不會發生此錯誤。 我認為這意味着該功能在DOM准備就緒之前就已執行。

這表示當由$（document）.ready調用時，命名函數應與匿名函數相同。 這里發生了什么？

Answer 1

您正在立即調用函數，而不是傳遞引用。 您應該在editdoc之后使用不帶() editdoc ：

$(document).ready(editdoc);

您正在做的是立即使用editdoc()調用該函數，並將返回值從該函數傳遞到$(document).ready() 。 因此，您觀察到該函數被立即調用。

任何時候，您將()放在函數名稱或定義之后，都在告訴JS解釋器立即執行它。 如果您只是傳遞一個函數的名稱，那么您傳遞的是引用（如指針），傳遞給它的函數可以稍后再執行它，在這種情況下，這就是您想要的。

Answer 2

腳本的問題在於您正在執行該功能。 應該是這樣

你應該改變這個

$(document).ready( editdoc() );

對此

$(document).ready( editdoc );

Answer 3

改為這樣做：

<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
    $(document).ready(function() {
        function editdoc(){
            document.getElementById("editme").innerHTML = "hello world";
        }
        editdoc();
    });
</script>