问个关于JS代码时机的问题

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript">
        var ds = ["武汉", "长沙", "上海", "北京", "广州", "深圳", "南京", "临安", "哈尔滨", "台南", "新竹", "台北", "花莲", "汴州"];        function cTb(ds, r, c) {
            $("#tb_city").empty();
            var tb = document.getElementById("tb"), L = ds.length, ii = 0;
            for (var i = 0; i < r; i++) {
                var row = tb.insertRow(-1);
                for (var j = 0; j < c; j++) {
                    row.insertCell(-1).innerHTML = ds[ii++];
                }
            }
        }
        $(function () {            //$("#txt").focus(function () {   //代码段 ①
            //    cTb(ds, 4, 3);
            //});
            
            cTb(ds, 4, 3);   //代码段 ②            $("#tb td").click(function () {
                var v = $(this).text();
                $("#txt").val(v);
            }).css("cursor", "pointer");            //cTb(ds, 4, 3);   //代码段 ③
        });
    </script>
</head>
<body>
    <div>
        <table id="tb"></table>
    </div>
    <div>
        <input type="text" id="txt" />
    </div>
</body>
</html>
以上这段代码 是正确的
但是当用 代码段① 或 代码段③ 代替 代码段② 时，程序功能就不能实现。我现在想要做的是： 点击 id为"txt" 的input，在生成的表格中，点击td，可以把td的值赋给 id为"txt"的input说的拗口，其实大家一看就明白我的意思了。
代码该怎么写？

解决方案 »

  1.   

    js是按照代码的位置顺序执行的。
    cTb(ds, 4, 3); 是生成表格的，放在③处，前面的$("#tb td").click(这段代码执行时，td还没有创建出来，因此无法进行绑定click事件的
    代码段 ①是没有问题的，但是，只是在<input type="text" id="txt" />获得焦点时才执行，效果与代码段 ②不同
      

  2.   


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>  
        <script type="text/javascript">
            var ds = ["武汉", "长沙", "上海", "北京", "广州", "深圳", "南京", "临安", "哈尔滨", "台南", "新竹", "台北", "花莲", "汴州"];        function cTb(ds, r, c) {
                $("#tb").empty();
                var tb = document.getElementById("tb"), L = ds.length, ii = 0;
                for (var i = 0; i < r; i++) {
                    var row = tb.insertRow(-1);
                    for (var j = 0; j < c; j++) {
                        row.insertCell(-1).innerHTML = ds[ii++];
                    }
                }
            }
            $(function () {            $("#txt").focus(function () {   //代码段 ①
                    cTb(ds, 4, 3);
                    $("#tb td").css("cursor", "pointer")
                });
                
                //cTb(ds, 4, 3);   //代码段 ②
      
                $("#tb td").live('click',function () {
                
                  console.info( 55555   )
                    var v = $(this).text();
                    $("#txt").val(v);
                });            //cTb(ds, 4, 3);   //代码段 ③
            });
        </script>
    </head>
    <body>
        <div>
            <table id="tb"></table>
        </div>
        <div>
            <input type="text" id="txt" />
        </div>
    </body>
    </html>
      

  3.   


    $(function () {
                
                $("#txt").focus(function () {
                    cTb(ds, 4, 3);
                });            $("#tb td").click(function () {
                    var v = $(this).text();
                    $("#txt").val(v);
                }).css("cursor", "pointer");        });这样，动态创建了tr td，但是 点击td没反应啊。
    我该怎么做呢？