脚本不是从外部文件执行的

时间:2015-01-18 18:56:13

标签: javascript jquery flask

我已经陷入了一个非常愚蠢和神秘的问题几个小时。 JQuery在<script></script>之间工作,但在从外部文件调用时不起作用。我必须犯一个愚蠢的错误,但在哪里?

我的HTML中有这个(标准的bootstrap导入,正如你所注意到的):

<!-- 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>

但是,如果我将{strong>相同代码放在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>

2 个答案:

答案 0 :(得分:0)

事实上,问题似乎与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>' );
});

答案 1 :(得分:-1)

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

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