的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在页面加载：工作在控制台上，而不是在负载

回答

相关问题