Bootstrap 4 Select2 jQuery Not working in Ajax Calls-CodePudding

I am using Bootstrap 4 and Select2 jQuery plugin in my webpage. It is working perfectly in my website. But when calling an another page contenting Select2 class of select input is not working.

Plugin Initiated at main page as -

<script type="text/javascript" language="javascript">
$(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
    $('.select2-selection').css('border','0px')
    $('.select2-container').children().css('border','0px')

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
})
</script>

My Ajax page contain below input elements -

<select  style="width: 100%;" id="emp" name="emp">
<option value="">-- Select employee --</option>
<option value="E001">Employee 1</option>
<option value="E002">Employee 2</option>
</select>

I am unable to figure out the issue why it not working on Ajax Called page. Anybody please give answer? Thanks in advance.

CodePudding user response：

In my opinion, you can call the select2 plugin function again after ajax called, I think. Try it, maybe the mistake fixed. Hope it helps. thanks