JQuery函数没有被触发

Question

根据国家/地区列表检索州名单，并根据所选州检索城市。我正在使用JQuery和Ajax。第一个jquery函数被触发但第二个jquery函数没有被触发，即使我已正确指定了我的字段ID

    $(document)
    .ready(
            function() {


                $('#countryId').on('change',function(){

                    jQuery
                    .ajax({


                     error : function() {

                            $("#stateSelectBox")
                                    .html(
                                            "<span class='error'>Failed to load state!</span>");

                        },
                        success : function(results) {

                            $("#stateSelectBox")
                                    .html(results);

                        } 
                    });

                    });



                $('#stateId').on('change',function(){



                    jQuery
                    .ajax({


                        error : function() {

                                $("#city")
                                        .html(
                                                "<span class='error'>Failed to load state!</span>");

                            },
                            success : function(results) {

                                $("#city")
                                        .html(results);

                            } 

                    });

                    });

                });

Answer 1

在你的第一次成功回调中，你是在DOM中插入html。因此，当文档准备就绪时，DOM中将无法使用第二个复选框。所以将第二个选择器置于成功回调中，这样当jquery在DOM中查找该特定元素时，它将找到它并附加您的事件。希望它有所帮助。

$(document)
.ready(
        function() {


            $('#countryId').on('change',function(){
                alert('mogana');
                var country_id="";
                country_id = $(this).val();

                jQuery
                .ajax({
                    data : "country="
                            + country_id,

                    url : "stateMapAction.action",
                    type : "POST",

                 error : function() {

                        $("#stateSelectBox")
                                .html(
                                        "<span class='error'>Failed to load state!</span>");

                    },
                    success : function(results) {

                        $("#stateSelectBox")
                                .html(results);

             $('#stateId').on('change',function(){

                alert('swe');
                var state_id="";
                state_id=$(this).val();

                jQuery
                .ajax({

                    data : "state="
                            + state_id,

                    url: "cityMapAction.action",
                    type: "POST",


                    error : function() {

                            $("#citySelectBox")
                                    .html(
                                            "<span class='error'>Failed to load state!</span>");

                        },
                        success : function(results) {

                            $("#citySelectBox")
                                    .html(results);

                        } 

                });

                });


                    } 
                });

                });




            });