Flask应用程序在外部文件中时不执行javascript答案

【问题标题】：Flask app not executing javascript when it's in an external fileFlask应用程序在外部文件中时不执行javascript
【发布时间】：2014-07-10 11:06:34
【问题描述】：

我有一个包含我的 CSS 和 JS 的 HTML 文件。在创建我的烧瓶应用程序时，我决定将 CSS 和 JS 分离出来，以便在静态目录中分离文件。

当我将所有内容都放在一个 HTML 文件中时，一切都按预期工作，但是当 CSS 和 JS 位于不同的文件中时，部分 JS 不会执行。

这是我在 HTML 文件中的导入：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"></script>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>

这是独立 JS 文件的内容：

$('#user_button').click(function(event) {
    $("#user_id").html($('option:selected').html());
    $('.button_div').show();
});

var prodData = [];
var boughtProds = [];

$('.prod_button').click(function(event) {

    if (boughtProds.indexOf($(this).data('name')) == -1) {
        prodData.push({
            name: $(this).data('name'),
            price: $(this).data('price'),
            quantity: 1,
        });
        boughtProds.push($(this).data('name'));
    } else {
        prodData[boughtProds.indexOf($(this).data('name'))].quantity = prodData[boughtProds.indexOf($(this).data('name'))].quantity + 1;
    }

    var total = 0;
    for (var x in prodData) total += prodData[x].price * prodData[x].quantity
    total = Math.round(total * 100) / 100
    var subtotal = '<tr><td></td><td>Subtotal</td><td>$' + total + '</td></tr>';

    var allProds = '';
    $.each(prodData, function(k, v) {
        allProds = allProds + '<tr><td>' + v.name + '</td><td>' + v.quantity + 'x</td><td>@ $' + v.price + ' each</td></tr>\n';

    });

    $('.table_contents > tbody').html(allProds);
    $('.table_contents > tfoot').html(subtotal);

});

$(document).ready(
    function() {
        $('.button_div').hide();
    })

奇怪的是这个函数在文档加载时可以正常工作：

 $(document).ready(
        function() {
            $('.button_div').hide();
        })

这个功能不起作用：

$('#user_button').click(function(event) {
    $("#user_id").html($('option:selected').html());
    $('.button_div').show();
});

但更奇怪的是，当所有内容都在一个 HTML 文件中时，一切正常。

有什么想法吗？

【问题讨论】：

你确定它正在加载外部文件吗？
@IanAuld 是的，因为 .hide() 函数适用于文档加载
.hide() 是似乎正在加载的 jQuery 的一部分。但是您的独立脚本是否正在加载？通过查看源代码并单击其链接进行检查。
页面是否有 JavaScript 错误？
@IanAuld 这个 jQuery 部分不起作用$('#user_button').click(function(event) { $("#user_id").html($('option:selected').html()); $('.button_div').show(); });

标签： javascript jquery python flask

【解决方案1】：

您要么需要将<script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"></script> 移到<head> 标记之外（例如，移到<body> 的末尾），要么需要将$('#user_button').click(...); 放在$(document).ready(...); 内。

发生的情况是您的浏览器在处理您的<head> 标记时开始加载您的外部脚本文件。一旦文件被加载，浏览器就会执行它，将点击事件绑定到#user_button。这发生在它处理您的 <body> 标记之前，因此 #user_button 还不是 DOM 的一部分。

如果您尝试检查 $('#user_button')，您会发现它是空的。

console.log($('#user_button'));

这个输出

[]

【讨论】：

太好了，谢谢！另外，我相信我是在纽约的蟒蛇活动中认识你的。

【解决方案2】：

我也遇到过类似的问题。检查网络时，静态 js 正在从缓存中加载。当我关闭缓存时，它开始工作。因此开发过程中需要重启调试服务器或关闭缓存。

【讨论】：