在 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 是产品组的下拉菜单，当我更改组的值时，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 文档中找到更多有关此调用的示例：http://api.jquery.com/on/