Проблема в заполнении поля выбора динамически с помощью jquery

Question

Я создаю элемент select динамически, используя jquery, и я хочу сделать действие, когда произойдет событие change.то есть, я хочу заполнить другое поле выбора, когда пользователь выбирает вариант из предыдущего поля выбора.код не работал, потому что первый блок выбора создавался (полностью) динамически (а не только динамически заполнялся).Я попытался сделать статическое поле выбора и динамически заполнить его, и когда пользователь выбирает опцию из этого поля со списком, я заполняю другое поле со списком. Этот код работает правильно.но в моем случае я должен создать элемент выбора динамически.Я знаю проблему, но я не знаю, как ее исправить.Я написал этот код:

$(document).ready(function(){

$("a.package").click(function(){

        var id = $(this).attr('id');
        var parameters = {"privPackage":id};
        $.getJSON("InquirerManagmentServlet", parameters, function (result){
            //alert('get param');
            var data = result[0];
            var cities = result[1];
            var semester = result[2];
            var college = result[3];

            for (var i = 0; i < data.length; i++) {
                var privNo = data[i]["privNo"];
                var privName;
                var input;
                if (privNo == 302){
                    if(college !== null && college.length){
                        input = $('<select name = "'+privNo+'" id ="collegeEName">');
                        $('>option',input).remove();
                        input.append($('<option >').val(0).text("choose .."));
                        for(var j=0; j<college.length; j++){
                            var option = $('<option />');
                            option.attr("value",college[j]["collegeNo"]);
                            option.text(college[j]["collegeEName"]);
                            input.append(option);
                         }
                    }
                } else if(privNo == 308){
                   //
                }
                $("div#InfoToValidate").append(input);
            }
        });
});

// fill second combo boxes
$("select").change(function(){
    alert("heey");
    var id = $(this).attr('id');
    if(id == "collegeEName"){
        var collegeNo = $(this).val();  // .text();
        var parameter = {
            "collegeNo":collegeNo
        };
        $.getJSON("InquirerManagmentServlet", parameter, function (departments){
            //var neighborhoods = result
            var idSecond = "departmentEName";
            $('>option',$("select#"+idSecond+"")).remove();
            $("select#"+idSecond+"").append($('<option/>').text(""));
            for(var j=0; j<departments.length; j++){
                $("select#"+idSecond+"").append($('<option value = "'+departments[j]["departmentNo"]+'"/>').text(departments[j]["departmentEName"]));
            }
        });
    }
    // the rest of code
});

});

Может ли кто-нибудь помочь мне, пожалуйста?

Answer 1

Поскольку вы создаете элемент select после того, как DOM уже загружен, вам необходимо использовать метод привязки, пригодный для будущего, например live или delegate:

Изменить

$("select").change(function(){

до

$("select").live('change',function(){