getJSON List Daynamic issues

getJSON List Daynamic issues

Dear,
This is the first time to post here i hope it will help me, my project to create list from database as dynamic and after that i can press on this list and whowing another list and again press and whoing another list so on ...etc , but i have problem in my code i can't see the second list after i click on first list , please see below my codae and let me know what problem here:

i think the problrm here "$("#ColList li").click( _updateList);" inthe first time when click not able to go inside function but the next time when i press back it's go inside function ???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery PHP Json Response</title>

<!--<link rel="stylesheet"  href="../common/css/css.css" />-->
<link rel="stylesheet"  href="../common/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet"  href="../common/css/jquery.mobile.theme-1.2.0.css" />
<link rel="stylesheet"  href="../common/css/jquery.jquery.mobile.structure-1.2.0.css" />

<script type="text/javascript" src="../common/js/jquery.js"></script>
<script type="text/javascript" src="../common/js/jquery.mobile-1.2.0.js"></script>
<script src="../common/js/jqm-docs.js"></script>







</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="a">
        <h1>Colleges</h1>
    </div>
    <div data-role="content" id="listCol">   
 
           
    </div>       
    </div>

      
                   
<script type="text/javascript">

var counter = 0;
var url="http://localhost/PhpProject1/BrowseDepartment.php";

var College_IDArr = new Array;
var College_NameArr = new Array;
var ImageArr = new Array;
var CDepartment_IDArr = new Array;
var Dept_IDArr = new Array;
var Dept_NameArr = new Array;

var CDepartment = 0;

var listCol = "";
var listDept = "";





function test1(){
listCol ="";
listCol +='<ul id="ColList" data-role="listview">';

$.getJSON(url,function(json){
$.each(json.Dept.members1,function(i,dat){
   
College_IDArr[i] = dat.College_ID;
College_NameArr[i] = dat.College_Name;
CDepartment_IDArr[i] = dat.CDepartment_ID;


listCol +='<li  id='+i+'><a href="Browsecollege.html#Dept"><h3>'+College_NameArr[i]+'</h3>';
listCol +='<span class="ui-li-count">'+CDepartment_IDArr[i]+'</span>';
listCol +='<p><strong>'+College_IDArr[i]+'</strong></p></a></li>';




//alert(i);
// var t = $.getJSON(url, {CollegeID:College_IDArr[i]});
//t.done(function(json){
//$.each(json.Dept.members2,function(j,dat){
//
//
//CDepartment_IDArr[i] = dat.CDepartment_ID;
//list +='<li><a href="index.html"><h3>'+College_NameArr[i]+'</h3>';
//list +='<span class="ui-li-count">'+CDepartment_IDArr[i]+'</span>';
//list +='<p><strong>'+College_IDArr[i]+'</strong></p></a></li>';
//
//}),"json"
//
//});
   
//alert(list);
//$.when($.getJSON(url)).done(function(result1) {
//});

});
if(counter ==0){
 listCol +='</ul>';
$('#listCol').html(listCol).trigger('create');
counter++;
}




});


}
$(document).bind('pageinit',function(){
    $.ajaxSetup({ cache: false });
   
var countDept = 0;

var _updateList = function( evt )
 {
//alert("a");
     var choiceVal = parseInt($(this).attr('id'));
     
     $("#DeptListUL").hide();

    listDept ='<ul id="DeptListUL" data-role="listview">';
    $.getJSON(url, {CollegeID:College_IDArr[choiceVal]},function(json){
    $.each(json.Dept.members2,function(i,dat){
       
        Dept_IDArr[i] = dat.Department_ID;
        Dept_NameArr[i] = dat.Department_Name;
        //CDepartment_IDArr[i] = dat.CDepartment_ID;

        listDept +='<li id='+i+'><a href="#Dept"><h3>'+Dept_NameArr[i]+'</h3>';
        //listCol +='<span class="ui-li-count">'+CDepartment_IDArr[i]+'</span>';
        listDept +='<p><strong>'+Dept_IDArr[i]+'</strong></p></a></li>';

countDept++;
});

listDept +='</ul>';

$('#Deptlist').html(listDept).trigger('create');

});

//$.mobile.changePage("Browsecollege.html#Dept");

 }


test1();
$("#ColList li").click( _updateList);

});
</script>





<div data-role="page" id="Dept" >

    <div data-role="header">
        <h1>Department</h1>
    </div>

    <div data-role="content" id="Deptlist">   
       
       
    </div>
   
   
</div>

</body>
</html>