Jquery Chosen插件添加回发部分

Question

我正在为MVC应用程序使用Jquery Chosen插件，并且所有内容最初都正确加载。但是，如果我使用ajax调用刷新页面上带有来自服务器的数据的div，则会创建一个完整的重复部分。

我如何防止这种情况发生？

<div id="div1">
     <div id="div2">

     </div>
     <div class="col-xs-4">
         @Html.DropDownListFor(m => m.Id, Model.List.GetSelectionList(Model.Id, "Please select a Name to add."), new { @id = "id", @class = "chosen-select" })
     </div>
     <div class="col-xs-1">
         <input type="button" id="btnAdd" value="Add Name" onclick="AddName();" />
     </div>
 </div>

<script type="text/javascript">
function AddName() {
    var id= $('#id').val();
    if (id> 0) {
        var url = '@Url.Action("AddName")';
        $.ajax(
            {
                type: "GET",
                url: '@Url.Action("AddName")',
                data: { id: id},
                success: function (data) {
                    $('#div2').html(data); //This is what duplicates the whole section
                },
                error: function (x, status, error) {
                    debugger;
                    alert(status + " " + error);
                }
            });
    }
};

var config = {
    '.chosen-select': {},
    '.chosen-select-deselect': { allow_single_deselect: true },
    '.chosen-select-no-single': { disable_search_threshold: 10 },
    '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
    '.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
    $(selector).chosen(config[selector]);
}

这是初始加载：

这是我点击添加名称后：

Answer 1

此问题与实际选择无关。我在返回ajax调用时更新了错误的div。我需要更新整个局部视图的div而不仅仅是它的一部分。一旦我改变它，它纠正了问题。