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

Question

我正在关注本教程，但是在使JavaScript示例正常工作方面遇到了麻烦。

我从W3Schools尝试了此代码，它可以工作。 但是，当我将代码移至外部文件时，它将停止工作。 我在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 个解决方案

解决方案1
2 已采纳

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

问题描述

1 个解决方案

解决方案1 2 已采纳

解决方案1
2 已采纳