javascript - 代码不会在 $(document).ready 中执行，但会在开发人员控制台中执行

Question

我有一些代码包装在 $(document).ready(function(){/*code*/}); 中，除了一行之外，所有代码都工作正常。上面的代码工作正常，下面的代码工作正常，我的控制台没有收到任何错误。

$('.main-right.category').height( $('.footer').height() + $('.main-right.category').height() );

那不火。但是，如果我将它准确地粘贴到开发人员控制台中并在页面加载后按回车键，它就可以工作了。所有元素都存在于页面加载时(意味着没有元素是通过 javascript 动态构建的)。在 chrome、firefox、IE 中结果相同。

有什么想法吗？

编辑:我应该补充一点，我的 css 是在我的 javascript 之前加载的，而且我在同一个 javascript 文件中做了其他 CSS 相关的调整，效果很好。

此外，如果我在该行代码的正上方 console.log $('.main-right.category').height() 和 $('.footer').height() ，它们都给出非零值如我所料的整数值。

Answer 1

当 DOM 准备好使用时，将触发 ready 事件。它不同于加载所有 Assets (css、javascript、图像等)时触发的加载事件。

我猜想当您的代码运行时，您尝试获取高度的元素确实已经计算了高度，所以看起来什么也没发生。

当您在控制台中执行代码时，所有内容都已加载，因此行为符合预期。

要绑定(bind)到加载事件，检查方法 .load() .