Question

我正在关注this tutorial，但在使JavaScript示例正常工作方面遇到困难。

我尝试了W3Schools的this code，它可以正常工作。但是，当我将代码移至外部文件时，它将停止工作。我在Flask终端或Chrome的控制台中看不到任何警告或错误。

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/demo')
def demo():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>

<script src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt"
crossorigin="anonymous"></script>

<!-- script>
$(document).ready(function() {

    $("p").click(function() {
        $(this).hide();
    });
}); // END .ready event.
</script -->

<script src="static/js/script.js"></script>
<!-- script src="{{ url_for('static', filename='js/script.js') }}"></script -->

</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

script.js：

$(document).ready(function() {

    $("p").click(function() {
        $(this).hide();
    });
}); // END .ready event.

Answer 1

此代码为我解决了问题。事实证明，此语法<script type="text/javascript" src="myFile.js">对于Flask外部文件JavaScript在Chrome中起作用是必需的。尽管<script src="myFile.js">仅在Firefox中对我有用。

在我的原始代码中，我还有很多注释掉了水平HTML标尺。这可能会干扰一些我出于实验和证据目的而留下的注释掉并禁用的脚本标记。仅<script>个标记具有溢出行为，从而干扰了先前禁用和注释掉的脚本标记，例如<script></script>。

我清除了它们，也许它们是冲突问题的一部分，也许不是，我不确定。

在控制台模式下调试JavaScript代码时，也不要忘记在Chrome网络浏览器中暂停 Ghostery扩展插件。它可能会导致您无法控制的其他错误。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>

<script src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt"
crossorigin="anonymous"></script>

<!-- script src="../static/js/script.js" -->
<script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>

</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<p onclick="$(this).hide();">Inline JavaScripting.</p>

</body>
</html>

无法使用Flask将我的JavaScript代码段移动到外部文件

1 个答案: