JavaScript File for select box not work after AJAX call in MVC

Question

I have a selectize.js JavaScript file in project that initially style the select box but when I load new select box via AJAX call not working this JavaScript.file for new appeared select box

This is my AJAX code

 $("#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 is a dropdown for product group AND when I change the value of group then OthFilter is a div and load with filtered select box related to the group of product and the name and id of select box is automatic with the number of filter now the filtered box can't be load perfectly because the styling script named selectize.js not working after AJAX call

This is an example of my filter box

<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>

after page load this select will turn to this

    <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>

What should I add to AJAX code that after succeed, all my automatic added select box styled with the selectize.js

Answer 1

Please re-design your code as below. I hope it will work.

$("#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

This is because your new elements does not have event bound. You should use the "on" method that provides you the option to bind events to elements created dynamically. Here is an example:

JQuery 1.7 and above

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

You will find more examaples of this call in the jquery documentation: http://api.jquery.com/on/