Нажмите и загрузите функцию обмена из динамически добавленной опции jquery

Question

У меня этот скрипт написан в основном файле. Которые выполняются правильно на предварительно загруженной опции.

<select id="version_select">
   for loop.....
   <option value="{{ score_criteria.pk }}" id="id_{{ score_criteria.pk }}">{{ score_criteria }}</option>                   
</select>

$("#version_select").change(function () {
   $(this).val();
}

Итак, когда я изменяю опцию, нажав, она выполнит функцию изменения и будет работать как я sh.

Но проблема возникает, когда я добавляю новую опцию с помощью ajax внутри выбора и хочу щелкнуть эту опцию и выполнить функцию изменения. Я могу выполнить функцию изменения, но не могу получить вновь добавленный объект-элемент, это может быть простым решением, но я застрял в этом. Код, который я обновлял до сих пор:

$(document).on('change','#version_select', function () {
    $(this).val();
}

В ajax успешный ответ Я добавляю опцию и пытаюсь выполнить функцию изменения.

success: function (response) {
  $("#version_select").append(`<option value="${response.id}" id="id_${response.id}">${response.value} 
   </option>`);
  $(document).on('click', `#id_${response.id}`, function () {
     $("#version_select").change();
  });
  $(`#id_${response.id}`).click();
}

Эти два изменения внесли изменение функция для выполнения, но я не могу получить новый объект опции в этой функции изменения. то есть в $(this).val();. Я знаю, что $("#version_select").change(); только не скажет, какой объект я передаю, пожалуйста, предложите мне правильный путь. Это может быть очень простое решение, но я застрял прямо сейчас, если этот вопрос дублирует или кажется не унылым, я быстро его уберу, любое предложение будет приветствоваться.