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.