javascript无法识别动态创建的对象

时间:2016-01-20 11:58:54

标签: javascript jquery html ajax

我的页面中有三个选择标记,它们的选项是动态创建的。当我更改第一个菜单时,第二个菜单生成完美。如果我再次更改第一个菜单,第二个菜单会完美更改。当我更改第二个菜单时,第三个菜单生成完美。但是,如果我再次更改第二个菜单,则firebug会显示错误,指出 document.getElementById(" third_list")为空。怎么解决这个?除此之外,为什么会这样?我已经在我的页面中创建了第三个选择标记。只是动态生成选项子标签。那么任何解决方案呢?

<body>
    <select id="first_list">  
    //menus are fetched by external functions
    </select>
    <select id="second_list" hidden="true">
    </select>
    <select id="third_list" hidden="true">
    </select>  

    <script>  

    $("body").on('change', '#first_list', function( e ) {
        e.preventDefault();
        $.ajax(
        {
            url:'ajax - Copy.php',
            type:'POST',
            async:true,
            data:{
                var1: $('#first_list').val()
            },
            success:function(response) {
                //alert(response);
                var a=(response.toString()).indexOf("<select");
                var b=(response.toString()).indexOf("</select>");
                var c=response.substring(a,b);
                document.getElementById("second_list").style.visibility="visible";
                document.getElementById("second_list").outerHTML=c;
            },
            complete:function(){
                //alert("complete");
            }
        });
    });  


    $("body").on('change', '#second_list', function( e ) { 
        $.ajax(
        {
            url:'ajax - Copy.php',
            type:'POST',
            async:true,
            data:{
                var1: $('#second_list').val()
            },
            success:function(response) {
                var a=(response.toString()).indexOf("<select");
                var b=(response.toString()).indexOf("</select>");
                var c=response.substring(a,b);
                document.getElementById("third_list").style.visibility="visible";
                document.getElementById("third_list").outerHTML=c;
            }
        });
    });
    </script>
</body>

0 个答案:

没有答案