Question

我想在加载时在我的主页上运行此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行，它将按预期工作。

我该如何解决这个问题？

Answer 1

因为你想在加载时让它在页面上工作，你应该将它包装在ready handler中。ready()方法指定当ready事件发生时会发生什么。

可以使用两种语法：

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

或

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

还要确保在您使用jQuery选择器时，元素.mm-page存在。

Answer 2

为了确保其所运行的所有DOM元素都存在，请将script标记放在HTML的最底部，就在结束</body>标记之前。然后，它上面的HTML定义的所有元素都可以使用。这还确保浏览器可以在下载您引用的任何外部脚本文件之前向用户显示该页面。 E.g：

<!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标记上指定。

Answer 3

console.log appear in the console

因为您的DOM已完成加载，现在可以使用了。

这就是你获得jQuery效果的原因。

在您当前的脚本中，它没有等待完成DOM加载并直接对其进行操作，因为它未完成加载而无法使用。

Eiher在

中编写脚本

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

或者：

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

页面加载上的Javascript：在控制台中工作，但不在加载时工作

3 个答案: