Why doesn't select2 close when an element is selected?

Question

JavaScript

I have the same problem in a modal window. When selecting from a list, the value then select2 does not close by itself. If you just click behind the drop-down list, it closes. I use this widget kartik demos.krajee.com/widget-details/select2 and when I select some value I get this error

jquery.js:5237 Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply is not a function
    at HTMLDivElement.dispatch (jquery.js:5237)
    at HTMLDivElement.elemData.handle (jquery.js:5044)
    at Object.trigger (jquery.js:8471)
    at HTMLSelectElement.<anonymous> (jquery.js:8549)
    at Function.each (jquery.js:367)
    at jQuery.fn.init.each (jquery.js:202)
    at jQuery.fn.init.trigger (jquery.js:8548)
    at SelectAdapter.select (select2.full.js:3180)
    at Select2.<anonymous> (select2.full.js:3251)
    at Select2.Observable.invoke (select2.full.js:655)

The modal window content is formed dynamically. That is, the new html is erased and added. That is, renderAjax is used. Tried to resubmit in select2 modal but no output
\kartik\select2\Select2Asset::register($this);

Answer 1

It was all about the change event

$('#modal').modal('show')
  .change($('#modalContent').html('<div style="display:flex;justify-content: center;margin: 60px 0;"><img src="/images/loader/35.gif"></div>'))
    .find('#modalContent')
    .load($(this).attr('href'))

$('#modal').on('show.bs.modal', function(e) {
      $('#modalContent').html('<div style="display:flex;justify-content: center;margin: 60px 0;"><img src="/images/loader/35.gif"></div>');
  })

i changed to this code