Javascript jQuery'；s change（）不起作用

我的页面有三个html选择标记

我希望这三个select标记具有以下功能：

当我更改selectA时，请选择B根据selectA自动更改。 创建selectB选项后，当我更改selectB而不是selectC时，根据selectB自动更改

（

例如

首先，选择A的选项有歌手、电影明星，选择B只是空的

当选择歌手选项时，选择B自动创建选项“Lady Gaga”、“Celine Dion”、“Whitney Houston”，如果有三位歌手创建了，当我选择“Lady Gaga”时，选择C将创建“生日”、“Facebook”、“google+”选项

当选中电影明星选项时，选择B自动创建选项“布鲁斯·威利斯”、“马特·达蒙”、“威尔·史密斯”，如果有三位电影明星创建了，当我选中“布鲁斯·威利斯”时，selectC将创建“生日”、“脸书”、“谷歌+”选项

)

我的问题是…当我更改selectB时，$（“#selectB_id”）。更改（）不起作用

以下是我的javascript代码：

$(function(){
$("#lineselect").change( function() {
    $.ajax({
        url: '/lineflow/ajaxgetselect',
        type:'POST',
        data:{ service_id:$("#lineselect option:checked").val() , level:1 },
        success: function( res ){
            var obj = jQuery.parseJSON(res);

            if( $("#lineselect").val() == 0 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
            }
            else if( $("#lineselect").val() == 1 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');
                $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
                for( i=0; i<obj.length; i++)
                {
                    $('#service_type').append($("<option></option>")
                                    .attr("value",obj[i].id)
                                    .text(obj[i].name)); 
                }
            }
            else if( $("#lineselect").val() == 2 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<input type="text" id="url_name" name="url_name"></input>');
            }
            else if( $("#lineselect").val() == 3 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<select id="url_type" name="url_type"><option value="0">ALL</option></select>');
                for( i=0; i<obj.length; i++)
                {
                    $('#url_type').append($("<option></option>")
                                    .attr("value",obj[i].id)
                                    .text(obj[i].name)); 
                }
            }
        },
        error: function(obj, status, err){}

    }); 

});

$("#service_type").change( function() {         // this change not work!!!
    $.ajax({
        url: '/lineflow/ajaxgetselect',
        type:'POST',
        data:{ service_id:$("#service_type option:checked").val() , level:2 },
        success: function( res ){
            var obj = jQuery.parseJSON(res);            

            $("#third_li").html("");
            $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
            for( i=0; i<obj.length; i++)
            {
                $('#service_type').append($("<option></option>")
                                .attr("value",obj[i].id)
                                .text(obj[i].name)); 
            }

        },
        error: function(obj, status, err){}

    }); 

});

$（函数（）{
$（“#lineselect”）.change（函数（）{
$.ajax({
url:“/lineflow/ajaxgetselect”，
类型：'POST'，
数据：{service_id:$（“#lineselect选项：选中”）.val（），级别：1}，
成功：功能（res）{
var obj=jQuery.parseJSON（res）；
if（$（“#lineselect”）.val（）==0）
{
$（“#second_li”）.html（“”）；
$（“#third_li”）.html（“”）；
}
else if（$（“#lineselect”）.val（）==1）
{
$（“#second_li”）.html（“”）；
$（“#third_li”）.html（“”）；
$（“#second_li”）.html（'ALL'）；
$（“#third_li”）.html（'ALL'）；
对于（i=0；i使用事件委派：

$("body").on('change', '#service_type', function() { 
    // your code
});

在这一行：

$("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');


请注意，页面上的
#second_li
元素必须是静态的。否则，请使用其他选择器


参考资料：


-jQuery API文档
试试“开”而不是“改”：$（…）。开（'change'，…）@Atber这两者之间没有区别。
。改（func）
只是
的捷径。（'change'，func）
哦！是这样。我必须学习活动委派的一部分，非常感谢！！
$('#second_li').on('change', '#service_type', function () {
    $.ajax({
        // 
    });
});