的JavaScript在頁面加載：工作在控制檯上，而不是在負載

我想在加載時在我的主頁上運行此javascript：的JavaScript在頁面加載：工作在控制檯上，而不是在負載

$(".mm-page").css({"position":"inherit"});

我說這個我home.html.erb的底部：

<% content_for(:after_js) do %> 
    <script type="text/javascript"> 
    console.log("before"); 
    $(".mm-page").css({"position":"inherit"}); 
    console.log("after"); 
    </script> 
<% end %>

兩個console.log都出現在控制檯中，但jquery沒有任何作用。如果我手動運行jQuery的線在控制檯，它按預期工作。

我應該如何着手解決這一問題？

來源

2016-03-16 Graham Slick

添加腳本中的DOM準備處理程序，並嘗試 –

既然你想讓它頁面上工作時，將其加載，你應該把它包準備handler.The內ready()法規定當ready事件發生時會發生什麼。

兩種語法可用於：

$(document).ready(function(){ 
    $(".mm-page").css({"position":"inherit"}); 
});

$(function() { 
    $(".mm-page").css({"position":"inherit"}); 
});

還可以肯定的是，元素.mm-page在你使用它與jQuery選擇的時刻存在。

來源

2016-03-16 07:44:32

爲確保其所有DOM元素都存在，請將script標記放在HTML的最底部，就在關閉</body>標記之前。上面的HTML定義的所有元素都可以使用。這也保證了瀏覽器可以顯示用戶的頁面下載任何外部腳本文件您參考之前。例如：

<!doctype html> 
<html> 
<!-- ...your page here... --> 
<script src="jquery.js"></script> 
<script> 
    console.log("before"); 
    $(".mm-page").css({"position":"inherit"}); 
    console.log("after"); 
</script> 
</body> 
</html>

您需要將其轉換爲您正在使用的任何渲染引擎，但您明白了。瀏覽器的最終結果應該如此。

或者，您可以可以使用jQuery的ready回調，但與腳本標記在正確的位置，這是不必要的。

邊注：默認type是JavaScript的，沒有必要指定它的script標籤。

來源

2016-03-16 07:48:40

console.log appear in the console

因爲您的DOM已完成加載，現在可以使用了。

這就是爲什麼你得到jQuery的效果。

在當前的腳本，它不等待完成DOM裝載並在其上直接操作，因爲它沒有完成加載哪些不可用。在

$(document).ready(function() { 
    // Handler for .ready() called. 
});

Eiher寫腳本吧：

$(function() { 
    // Handler for .ready() called. 
});

來源

2016-03-16 07:49:54

的JavaScript在頁面加載：工作在控制檯上，而不是在負載

回答

相關問題