event listner isn't working on dynamically created object

Question

In my php page there are three select tag. If I select the first one then second one appears (fetching its data from an Oracle package). Its working perfectly but when I click the second select tag the third one is supposed to appear. But it isn't.

<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>  

Here the second event listner is not working. What's the reason? I somewhere read about using on function but I didn't understand it fully. Could somebody help me solve it out please?