jquery - 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);

                        } 

                });

                });


                    } 
                });

                });




            });