Второе событие изменения вложенных выпадающих списков не запускается

Question

У меня есть один выпадающий список с названиями компаний. Изменение () помещается в тег выбора этого списка.

Когда пользователь выбирает компанию, я звоню Ajax, чтобы связать потенциальные отделы с выбранной компанией. Если отделы найдены, они отображаются во втором раскрывающемся списке.

Мне тоже нужно изменить () в этом списке, но оно не работает, и я не понимаю, почему.

Я проверил на простом примере, что вложенные события изменений были в порядке, и он прекрасно работает: https://www.w3schools.com/code/tryit.asp?filename=GC3YFDYYSTVA

Но в моем проекте что-то мешает работать второму событию. Если Ajax возвращает результат, второй выпадающий список вставляется обратно в DOM, поэтому он должен работать.

Кстати, когда я копирую, вставляю второе изменение () в консоль и использую раскрывающийся список, событие запускается ..

Есть идеи?

HTML

     @*DropDown List for company*@
     <div class="form-group" id="setCompanyId">
        <label asp-for="Id" class="control-label"></label>
          <select name="Id" asp-items="Model.Options" id="Id">
               <option value="">Sélectionnez une société</option>
               <option value="0">Autre</option>
          </select>
     </div>

     @*DropDown List for department*@
     <div class="form-group" id="setCompanyDepartment">
        <label asp-for="DepartmentId" class="control-label"></label>
          <select name="DepartmentId" id="DepartmentId">
               <option value="">Sélectionnez un département</option>
               <option value="0">Autre</option>
          </select>
     </div>

JS

$(document).ready(function () {
  let department = $("#setCompanyDepartment");
  let departmentChildren = $("#DepartmentId").html();

  // Store the Id value of the selected company item
     let dropdwId = $("select#Id");
     let id = dropdwId.val();

  // Store the Id value of the selected department item
     let dropdwDepartmentId = $("select#DepartmentId");

  // When a selection is made by the user in the company dropdownlist
     $("#Id").change(function () {

        // Modify the Id value of the selected item
        id = dropdwId.val();
        departmentId = dropdwDepartmentId.val();

        // If the user selects a company the corresponding departments are displayed by Ajax request
          if (id > "0") {
           $.ajax({
              url: "/Register/GetDepartmentsByCompany",
              data: { companyId: id },
              type: "GET",
              success: function (result) {
                 $.each(result, function (index, row) {
                   if (result != null) {
                    $("#setCompanyId").after(department);
                    $("#DepartmentId").empty();
                    $("#DepartmentId").append(departmentChildren);
                    $("#DepartmentId").append("<option value='" + row.id + "'>" + row.name + "</option>");
                    }
                 });
              },
              dataType: "json",
             });

          $("select#DepartmentId").change(function () {
               console.log("ok");
          });
       }