事件列表器不处理动态创建的对象

Question

在我的php页面中有三个选择标记。如果我选择第一个，则会出现第二个（从Oracle包中获取其数据）。它工作得很好但是当我点击第二个选择标签时，第三个应该出现。但事实并非如此。

<select id="first_list">  
//options are fetched using a different function  
</select>  
<select id="second_list" hidden="true">  
</select>  
<select id="third_list" hidden="true">  
</select>  

<script>

$(document).ready(function() {

$('#first_list').change(function(e) {
    e.preventDefault();
    $.ajax(
    {
        url:'ajax.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");
        }
    }
    );
});  

$('#second_list').change(function() {
    alert("second list is hit");  
});  

</script>  

此处第二个事件列表器无效。什么原因？我在某处阅读有关使用函数但我完全不理解它。有人可以帮我解决一下吗？