【发布时间】：2017-10-06 07:07:07
【问题描述】：
问题
似乎 jQuery 已加载并正在运行，但它尝试使用的元素（<div>s）尚不可用，因此它只是返回未定义。问题可能是该项目包含也使用$ 符号的AngularJS 框架。知道这一点后，我修改了我的 jQuery 代码，以 jQuery(document).ready(function($) { ... 开头，但似乎并没有解决问题。我还添加了jQuery.noConflict();，这也没有帮助。我也试过这种模式：
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
那也没有用。我尝试在index.html 中移动脚本，将jQuery 和bootstrap.min.js（因为引导程序依赖于jQuery）放在脚本的底部、顶部或中间。这改变了结果，但它仍然是错误的结果。我有时会从console.log() 得到undefined undefined undefined 0 作为所有divs 的高度的结果。
很奇怪的问题。在我尝试使用 jQuery 执行此操作之前，我实际上只是使用了 JavaScript，但后来我尝试了 jQuery，因为我读到了 ready() 方法，因为我认为 HTML 元素本身还没有“准备好”使用。
注意：$("#contentDivision") 是问题的最重要特征，因为它是动态填充的，因此它的高度会随着文档加载而变化，这意味着 jQuery 需要在 $("#contentDivision") 填满所有文字和图片（这是一个博客）。
导致我产生这种想法的另一件事是，在 chrome 控制台中编写与 main.js 中完全相同的 jQuery 代码会产生正确的结果。
我还需要帮助创建某种侦听器或其他东西以动态重新运行 jQuery 脚本，以便窗口为每种类型的屏幕适当地调整其高度。
感谢任何帮助，谢谢。
main.js（包含我的 jQuery 代码）
jQuery.noConflict();
jQuery(document).ready(function($) {
console.log('jQuery(document) is ready');
console.log($(window).height()); // returns height of browser viewport
console.log($(document).height()); // returns height of HTML document
console.log(
$("#panelDivision").height() + " " +
$("#scrollDivision").height() + " " +
$("#contentDivision").height() + " " +
$("#extraDivision").height()
);
var $max = Math.max($("#contentDivision").height(), $("#extraDivision").height());
console.log($max);
$("#scrollDivision").height($max - $("#panelDivision").height());
$("#contentDivision").height($max);
$("#extraDivision").height($max);
});
我从 jQuery 得到的输出
jQuery(document) is ready
949
1299
75 0 undefined 800
NaN
index.html（省略css链接和元标记）
<body ng-app="myApp">
<div class="main_container">
<navbar></navbar>
<div class="container-fluid page-wrap">
<div class="row">
<div id="leftDivision" class="col-md-3 paddingRemove side-posts">
<posts></posts>
</div>
<div id="contentDivision" class="col-md-7 paddingRemove white-container" ng-view></div>
<div id="extraDivision" class="col-md-2 paddingRemove white-container">
<lorem></lorem>
</div>
</div>
</div>
<foobar></foobar>
</div>
<!-- Imported JavaScript Files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Local Angular-related JavaScript Files -->
<script src="client/js/app.js" type="text/javascript"></script>
<script src="client/js/main.controller.js" type="text/javascript"></script>
<script src="client/js/auth.controller.js" type="text/javascript"></script>
<script src="client/js/blog.controller.js" type="text/javascript"></script>
<script src="client/js/directives.js" type="text/javascript"></script>
<script src="client/js/filters.js" type="text/javascript"></script>
<script src="client/js/factories.js" type="text/javascript"></script>
<script src="client/js/main.js" type="text/javascript"></script>
</body>
</html>
【问题讨论】：
-
我的 angularJS 时间已经很久了，但我知道您在 on
contentDivision上使用的 ng-view 在第一步中只会在 dom 中创建评论。只有在插入之后才会创建 div。 docs.angularjs.org/api/ngRoute/directive/ngView阅读这里，我无法解释，所以我不能给出正确的答案 -
我在 html 中看不到 id="Div"。