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/

在MVC中调用AJAX后，选择框的JavaScript文件不起作用

2 个答案: