MVC DropDownList OnChange jQuery在第二次后未触发

Question

在我的MVC CORE 2.2项目中，我有一个带有DropDownList的视图。在site.js中，我添加了一些jQuery以在用户更改组的值并部分重新加载页面时捕获。这很好用，但是只是第一次更改了DropDownList的值。对选定值进行任何其他更改后，jquery不会触发。我在做什么错了？

<select class="form-control" data-val="true" data-val-required="The Group field is required." id="ddlGroup" name="IdSelectedGroup">
  <option value="">Select group...</option>
  <option value="1">Group 1</option>
  <option value="2">Group 2</option>
  <option value="3">Group 3</option>
  <option value="4">Group 4</option>
  <option value="5">Group 5</option>
</select>

$(document).ready(function() {
  $('#mainContent').on('click', '.pager a', function() {
    var url = $(this).attr('href');
    $('#mainContent').load(url);
    return false;
  });

  $('#mainContent').on('click', '.table th a', function() {
    var url = $(this).attr('href');
    $('#mainContent').load(url);
    return false;
  });

  $("#ddlGroup").on('change', function() {
    var strSelected = "";
    $("#ddlGroup option:selected").each(function() {
      strSelected += $(this)[0].value;
    });

    var url = "/Clients/Index?idSelectedGroup=" + strSelected;
    $('#mainContent').load(url);
  });
});