ajax后不再工作的jQuery select2

Question

我在div上的站点上有一个简单的select2控件。 网站加载后，一切正常。 但是，如果将Select2所在的div的simpleDiv的html内容加载了Ajax，则Select2在触发时不再显示结果。 这意味着，在这种情况下，Select2数据是从服务器获取的，但从未在Select2中显示。 这一切仅在Ajax加载“ simpleDiv” html内容时发生。 否则，一切正常。

有人可以帮忙吗？

<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

每当您使用.html()或.innerHTML更改时，从本质.innerHTML ，DOM都会被重建，并且所有附加到它们的javascript事件和属性都将丢失。 但是解决方法很简单。 完成插入新HTML后，只需再次调用Select 2。 所以像这样：

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

我附加了一个jsfiddle来说明这一点： http : //jsfiddle.net/HT3rP/1/

Answer 2

如果我的问题正确无误，则可能是与此Stackoverflow问题相关的类似问题

你可以尝试这样的事情

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