Почему событие onchange не работает при использовании select2

вот код, который я написал,

<div class="col-12 row ">
                    <div class="col-8">
                        <div class="form-group">
                            <label for="exampleInputUsername2">Quotation Closure<span class="danger"
                                    style="color: red;"> *</span></label>
                            {{form.quotation_closure}}
                        </div>

                    </div>
                    <div class="col-4 mt-3">
                        <div class="form-group">
                            <label for=""></label>
                            <select name="" id="quotation_closure" class="form-control closure ">
                                <option value="">Select Qtn Closure</option>
                                {% for i in quotation_masters_closure %}
                                <option value="{{i.id}}">{{i.name}}</option>
                                {% endfor %}
                            </select>

                        </div>

                    </div>

мой код jquery,

    $('#quotation_closure').on('change',function(e){
     e.preventDefault()
   
      console.log("hai")
      master_id=$(this).val()
      console.log(master_id)
   


      $.ajaxSetup({
      headers:{"X-CSRFToken":'{{csrf_token}}'}
                  })
      $.ajax({
          type:'POST',
          url:"{% url 'select_qtn_closure' %}",
          data:{
              'master_id':master_id

      },
      success: (data) => {

        CKEDITOR.instances["id_quotation_closure"].setData(data)
       
      }

})

  })

В своем проекте я использовал select2 select boxes. При выборе опции в select2, нужно заполнить данные в другом текстовом поле. Но событие onchange в select2 не работает. Если я использую обычный html select box, он работает отлично. Может ли кто-нибудь помочь мне, где я ошибся?

$(document).on('change', '#quotation_closure', function (e) {
  // your code
});