無法使用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 已采納