在MVC中调用AJAX后，选择框的JavaScript文件无效

Question

我在项目中有一个selectize.js JavaScript文件，最初为选择框设置样式但是当我通过AJAX调用加载新的选择框时，不能使用此JavaScript.file为新出现的选择框

这是我的AJAX代码

 $("#SlctGrpList").change(function (e) {
        e.preventDefault();
        $('#loadingIndicator').fadeIn();
        var curentUrl = "/search?SlctGrpFilt=" + $("#SlctGrpList").val() + getAllVars("SlctGrpFilt");
        $.ajax({
            url: "/Product/getOthFilter/" + $("#SlctGrpList").val(),
            success: function (result) {
                $('#OthFilter').html(result);
            },
        });
    });

SlctGrpFilt是产品组的下拉列表，当我更改group的值时，OthFilter是一个div并加载带有与产品组相关的筛选选择框，选择框的名称和ID是自动的，过滤器的数量现在已经过滤由于名为selectize.js的样式脚本在AJAX调用后无法正常工作，因此无法正确加载框

这是我的过滤器盒的一个例子

<select id="Filter_4" name="Filter_4" onchange="filterGroup(4)">
                    <option value="19"> option1</option>
                    <option value="21"> option2</option>
                    <option value="22"> option3</option>
                    <option value="23"> option4</option>
            </select>

页面加载后，此选择将​​转为此

    <div class="an-default-select-wrapper">
      <select tabindex="-1" class="selectized" style="display: none;">
        <option value="0" selected="selected">option1</option>
      </select>
      <div class="selectize-control single rtl">
         <div class="selectize-input items full has-options has-items">
            <div class="item" data-value="0">option1</div>
         <input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: 10000px;"></div>
         <div class="selectize-dropdown single" style="display: none; visibility: visible; width: 190.5px; top: 40px; left: 0px;">
             <div class="selectize-dropdown-content"><div class="option selected" data-selectable="" data-value="0">option1</div>
         <div class="option" data-selectable="" data-value="1">option1</div>
         <div class="option" data-selectable="" data-value="2">option2</div>
         <div class="option" data-selectable="" data-value="3">option3</div>
         <div class="option" data-selectable="" data-value="4">option4</div>
       </div>
    </div>

我应该向AJAX代码添加什么，在成功之后，所有我自动添加的选择框都用selectize.js设置

Answer 1

请重新设计您的代码，如下所示。我希望它能奏效。

$("#SlctGrpList").on("change", function (e) {
        e.preventDefault();
        $('#loadingIndicator').fadeIn();
        var curentUrl = "/search?SlctGrpFilt=" + $("#SlctGrpList").val() + 
getAllVars("SlctGrpFilt");
        $.ajax({
            url: "/Product/getOthFilter/" + $("#SlctGrpList").val(),
            success: function (result) {
                $('#OthFilter').html(result);
            },
        });
    });

Answer 2

这是因为您的新元素没有事件限制。您应该使用“on”方法，该方法为您提供将事件绑定到动态创建的元素的选项。这是一个例子：

JQuery 1.7及以上版本

$(useAnOuterStaticSelectorHere).on("change", "#SlctGrpList", function() {
    // code for event handling
});

您将在jquery文档中找到更多此调用的示例：qazxsw poi