Ajax“on change”不会触发

Question

我有一个表单，我想根据下拉列表中的所选项目预先填充它。 HTML代码：

我的 Ajax.js 看起来像：

$("#domain_selected").on('change', function() {
  $.ajax({
    url: '/returndomaindetails',
    data: {
      domainselect: $("#domain_selected").val()
    },

    success: function(data, status, xhr) { // success callback function
      if (data.length > 1) {
        var js = JSON.parse(data)
        var domainname = js['domainname']
        var domainarchitect = js['domainarchitect'];
        $('#domainname').empty().append(domainname)
        $('#domainarchitect').empty().append(domainarchitect)
        $("#domain_details").show()
      } else {
        $("#domain_details").hide()
      }

    },
    error: function(jqXhr, textStatus, errorMessage) { // error callback
    }
  });
})

HTML

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Change Domain</h4>
    <form action="{{ url_for('changedomain') }}" method="post">
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="domain_selected" class="col-form-label">Select domain</label>
          <select id="domain_selected" name="domain_selected" class="form-control">
            <option>Choose</option>
            {% for x in domain %}
            <option value="{{x}}">{{ x }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-row" name="domain_details" id="domain_details" style="display: none">
        <div id="domain_name" class="form-group col-md-4">
          <label class="col-form-label">Domain Name</label>
          <input type="text" class="form-control" name="domainname" id="domainname" placeholder="">
        </div>

        <div class="form-group col-md-4">
          <label class="col-form-label">Domain architect</label>
          <input type="text" class="form-control" name="domainarchitect" id="domainarchitect" placeholder="">
        </div>

      </div>
      <div>
        <button type="submit" class="btn btn-primary">Change Domain</button>
      </div>
      {% block scripts %}
      <script src="{{ url_for('static', filename='js/ajax.js') }}"></script>
      {% endblock %}

现在，在烧瓶端点 /returndomaindata 上，我只有一个简单的打印语句来获取 GET 请求到达的指示，但它没有。

@app.route('/returndomaindetails', methods=["GET"])
def returndomaindetails():
if request.method=="GET":
    print("got the GET request")
    domainselect=request.args.get('domainselect')
    data=Domains.returndomaindetails(domainselect)
    print(data)
    return json.dumps(data)

似乎“on change”事件没有触发。 控制台中绝对没有错误。 类似的功能在同一个文件中工作没有问题。

Answer 1

原来是缩进问题——函数前有一个空格