開發專案時候選擇框DropDownList的Change事件，有時候需要多級級聯從而動態生成Select元素，但是此時的Select元素的Change事件無法觸發，非常苦悶。

在專案中採用了兩種方式，一種是重新聲稱元素的時候，把事件寫入到partial的view中，但是這種方法執行還是不錯，但是在我做另外一個view的時候，始終不行，非常煩躁。嘗試了bind live和on的方式都沒有很好的解決，最後採用瞭如下的方式，希望有類似的童鞋能夠在此找到答案。

一種方式在document的$(document).ready(init)中註冊如下事件，然後在建立新的元素的時候重新把事件引入進來。

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

第二種方式就是直接編寫如下方式：

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