Файл JavaScript для поля выбора не работает после вызова AJAX в MVC

Question

У меня есть selectize.js Файл JavaScript в проекте, который изначально стилизует поле выбора, но когда я загружаю новое окно выбора с помощью вызова AJAX, этот JavaScript-файл не работает для нового появившегося окна выбора

Это мой код 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 и загрузка с отфильтрованным полем выбора, связанным с группой продукта и именем и идентификатор блока выбора является автоматическим с номером фильтра, теперь отфильтрованный блок не может быть загружен идеально, потому что скрипт стилей с именем 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

Это потому, что у ваших новых элементов нет привязки к событию.Вы должны использовать метод «on», который предоставляет вам возможность привязывать события к элементам, созданным динамически.Вот пример:

JQuery 1.7 и выше

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

Другие примеры этого вызова вы найдете в документации jquery: http://api.jquery.com/on/

Answer 2

Пожалуйста, измените дизайн вашего кода, как показано ниже.Я надеюсь, что это сработает.

$("#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);
            },
        });
    });