Ajax的“ on change”不会触发

I have a form, which I would like to pre-populate depending on selected item in a drop down list. The HTML code:

My Ajax.js looks like:

$("#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 %}

Now, on the flask endpoint /returndomaindata , I have just a simple print statement to get indication that the GET request arrived, however it doesn't.

@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)

Seems like the "on change" event is not firing. There are absolutely no errors in the console. Similar functions work without problem in the same file.

It turned out to be indentation problem - a space before the function