![](/img/trans.png)
[英]Rendering and executing <script> on pageload after injecting it from external .js file
[英]Script is not executing from external file
我已经被一个非常愚蠢而神秘的问题困扰了几个小时。 JQuery在<script></script>
,但从外部文件调用时则无效。 我一定是在犯一个愚蠢的错误,但是在哪里?
我的HTML中有这个(您会注意到,标准的引导程序导入):
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- Custom JavaScript
================================================== -->
<div class="col-xs-4">
<div id="my_camera"></div>
<div id="send-button"></div>
</div>
...
现在,如果我直接在文件内部进行编码,如下所示,则Title
将按预期显示:
<!-- Custom JavaScript
================================================== -->
<script>$(function() {
$( "#Title" ).append( '<h1 class="text-capitalize">Title</h1>' );
});
</script>
<div class="col-xs-4">
<div id="my_camera"></div>
<div id="Title"></div>
</div>
但是,如果我将相同的代码放在custom.js
,则不会显示任何内容。 这是custom.js
内容:
$(function() {
$( "#Title" ).append( '<h1 class="text-capitalize">Title</h1>' );
});
以及修改后的HTML:
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- Custom JavaScript
================================================== -->
<script src="custom.js"></script>
<div class="col-xs-4">
<div id="my_camera"></div>
<div id="Title"></div>
</div>
这个问题似乎在事实没有什么可以做的jQuery。 我正在使用Flask python框架,似乎无法设置除static
以外的目录的路径。 因此,应用程序看不到任何static
以外的东西。
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- Custom JavaScript
================================================== -->
<script src="../static/js/custom.js"></script>
custom.js内容:
$(document).ready(function () {
$( "#left-col" ).append( '<h1 class="text-capitalize">Title</h1>' );
});
可能在呈现HTML之前调用了您的JS。 尝试将其包装在ready函数中。
$(document).ready(function(){
$( "#Title" ).append( '<h1 class="text-capitalize">Title</h1>' );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.