jjery select2在ajax不再工作之后

Question

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

有人可以帮忙吗？

<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更改内容时，实际上，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

如果我的问题正确无误，您可能遇到与this stackoverflow problem

相关的类似问题

你可以试试这样的事情

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