ajax后不再工作的jQuery select2

Question

I have a simple select2 control on my site placed in a div. When the site loads, everything works fine. However, if the html content of the div "simpleDiv", where the Select2 is placed, is loaded with Ajax, the Select2 is not showing the results anymore when triggered. That means, in this case the Select2 data is got from the Server, but never shown in the Select2. And this all happens just when the "simpleDiv" html content is loaded with Ajax. Otherwise, everything works fine.

Can anyone help, please?

<div id='simpleDiv'>

<input type="hidden" id="MedikamentID" name="MedikamentID" class="fixed-width4" />

</div>

<script>
 $('#MedikamentID').select2({
                    placeholder: "[Medikament]",
                    allowClear: true,
                    minimumInputLength: 2,
                    ajax: {
                        url: "/Medikament/List",
                        dataType: 'json',
                        data: function (term, page) {

                            return {
                                query: term
                            };
                        },
                        results: function (data, page) {

                            return { results: data };
                        }
                    }
                });

</script>

Answer 1

Whenever you change things using .html() or .innerHTML , essentially, the DOM gets reconstructed and all the javascript events and properties attached to them is lost. But the fix is simple. Just call Select 2 again after you finished inserting the new HTML. So something like:

$.ajax("example.php").done(function(data){
   $("#simpleDiv").html(data)
   $("#MedikamentID").select2(...) //rebuild select2
})

I attached a jsfiddle to illustrate this: http://jsfiddle.net/HT3rP/1/

Answer 2

If I got your question correct, you may be having a similar problem related to this stackoverflow problem

You could try something like this

$(document).on("ready", "#MedikamentID", function () {
    $(this).select2({
       // options go here
    });
});