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/