When developing a project, the Change event of the DropDownList selection box sometimes needs to be cascaded to dynamically generate the Select element, but the Change event of the Select element cannot be triggered at this time, which is very frustrating.   

There are two methods used in the project. One is to re claim the element and write the event to the partial view. However, this method works well, but when I do another view, it is still not good and I am very upset. I tried the bind live and on methods, but they didn't solve it very well. Finally, I used the following methods, hoping that similar children's shoes can find the answer here.   

One way is to register the following events in $(document).ready(init) of the document, and then reintroduce the events when creating new elements.

$("select[name='Collection']").change(function () {  
  
            var selectedTypeID = $(this).val();  
            $.ajax({  
                url: '@Url.Content("/Products/GetSkuView")',  
                type: "POST",  
                dataType: "html",  
                data: { Collection: selectedTypeID },  
                success: function (data) {  
                    //$('#DDLSpecies').html(data);  
                    $("#SKU").prop('outerHTML', data);  
                },  
                error: function (XMLHTTPRequest, textStatus, errorThrown) {  
                    $.AlertException(XMLHttpRequest, errorThrown);  
                }  
            });  
        });  

The second way is to write directly as follows:

$(document).on('change', '#SKU', function () {  
       //alert('hhhhhh');  
       var selectedTypeID = $(this).val();  
       $.ajax({  
           url: '@Url.Content("/Products/GetSpeciesView")',  
           type: "POST",  
           dataType: "html",  
           data: { SKU: selectedTypeID },  
           success: function (data) {  
               //$('#Species').html(data);  
               //alert(data);  
               $("#Species").prop('outerHTML', data);  
           },  
           error: function (XMLHTTPRequest, textStatus, errorThrown) {  
               $.AlertException(XMLHttpRequest, errorThrown);  
           }  
       });  
   });  

I tried $('#SKU').on('change',...) and other methods. Unfortunately, I may have written it wrong there. I used the second method to solve it. I'd like to record it here. I hope it can help you a little.