无法使用 Flask 应用程序触发 Javascript答案

【问题标题】：Unable to trigger Javascript with Flask app无法使用 Flask 应用程序触发 Javascript
【发布时间】：2020-05-13 00:42:38
【问题描述】：

我开始使用 WTForms 学习 Flask，而且我想做的一些事情不可避免地需要 AJAX 和 Javascript 代码。当单击下拉框并选择一个选项时，我正在尝试在 SelectField 上执行 Javascript 函数。它似乎不起作用，我不知道为什么......我正在使用一个外部 .js 文件，当我查看 Chrome 开发人员信息时，它似乎被加载了。这是我的 HTML 和 javascript 文件。

start.html

{% extends "base.html" %}

{% block content %}
    <form action="" method="post" novalidate>
        {{ form.hidden_tag() }}
        <p>
            {{ form.dev_models.label }}{{ form.dev_models }}<br>
        </p>
        <p>
            {{ form.dev_count.label }}{{ form.dev_count }} <br>
        </p>
        <p>
            {% for device in devices %}
            {% if form.dev_models.data == device.model and device.stackable %}
            {{ form.dev_stacked.label }}{{ form.dev_stacked }}<br>
            {% break %}
            {% endif %}
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="static/js/modelSelection.js"></script>
{% endblock %}

modelSelection.js

$(function(){
    $('dev_models').click(function(){
        $.ajax({
            url: '/modelSelection',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response){
                console.log(response);
            },
            error: function(error){
                console.log(error);
            }
        });
    });
});

【问题讨论】：

如果我将 JS 移动到 HTML 文件中，它可以工作....如果它在外部文件中，它不会。我确实看到 .js 文件被下载。当我点击选择字段时，似乎永远不会被执行。
你确定你的选择器是正确的吗？ $('dev_models')?

标签： javascript ajax flask flask-wtforms

【解决方案1】：

也许您可以尝试将您的 modelSelection.js 包装在一个 jQuery 文档就绪函数中：

$( document ).ready(function() {
  // Handler for .ready() called.
});

这样，当所有其他代码加载完毕时，您的函数就会加载。

编辑：你在哪里定义了 dev_models 的 HTML id？

【讨论】：