脚本未从外部文件执行

Script is not executing from external file

本文关键字：执行 文件 从外部 脚本      更新时间：2023-09-26

几个小时以来，我一直被一个非常愚蠢和神秘的问题所困扰。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>

自定义.js内容：

$(document).ready(function () {
    $( "#left-col" ).append( '<h1 class="text-capitalize">Title</h1>' );
});

也许你的JS在HTML呈现之前被调用。尝试将其包装在就绪函数中。

$(document).ready(function(){
    $( "#Title" ).append( '<h1 class="text-capitalize">Title</h1>' );
});
相关文章：