1

我的表有问题，它是从函数生成的。

我需要获得点击的 td attr 并运行一些功能。但它不起作用。我的代码有什么问题..？

generate_table.js

function generate_table(data,lnk){
    tbl='';
    table_stayle=' border=1; cellpadding=0; cellspacing=0;' ;
    th_stayle='style="color:#FFFFFF; font-weight:bolder; background-color:#003366" ';
    tr_stayle=' bgcolor="#CCCCFF" ';
    td_stayle='';
    tr_alternate='';
        var tbl_body = '';
        var tbl_h = '';
            $.each(data[0], function(k , v) {
                tbl_h=tbl_h + "<td>"+k+"</td>";
                })
        tbl_h ='<tr align="center" '+th_stayle+'>'+tbl_h+ '</tr>';
            //detail
        var tbl_body = "";
        $.each(data, function() {
            var tbl_row = "";
            var row_key='';
                $.each(this, function(k , v) {
                    if(k==lnk){
                        row_key=v;
                        tbl_row =tbl_row + "<td><a href='javascript:void(0);'>"+v+"</a></td>";//<a href='"+v+"'>
                    }else{
                        tbl_row =tbl_row + "<td>"+v+"</td>";
                    }
                })
            tbl_body =tbl_body+ '<tr '+tr_stayle+' kode="'+row_key+'" class="tbl_tr" >'+tbl_row + '</tr>';               
        })
        return '<table id="tabel" '+table_stayle+'>'+tbl_h+tbl_body+'</table>';
}

像这样的php代码：

    <script language="javascript1.5" src="jquery-1.7.2.min.js"></script>
<script language="javascript1.5" src="generate_tabel.js"></script>
<style>
#div_body {overflow:auto; height:300px;}
</style>
======================================================================<br />
<input type="button" id="btn" name="btn" value="load data">
<div id="div_body" style="overflow:auto;border:solid; border-width:medium; width:400;300">    
</div>
<script>
$(function(){
    $('#btn').click(function(){
        url="getjson.php";
        aa=$.getJSON(url , function(data) {
    //JSON DATA LIKE THIS:
    //          aa='[{"Id":"1","wh2":"HandPhone","wh3":"-"},
    //          {"Id":"2","wh2":"Acessory","wh3":"-"},
    //          {"Id":"3","wh2":"Batery","wh3":"-"},
    //          {"Id":"4","wh2":"Chassing","wh3":"-"}]';
            $('#div_body').html(generate_table(data,"wh2"));
            });
        });

    //  $(".tbl_row").click(function(){
    //        alert($("tr").attr("kode"));
    //        //some function
    //     });
    $('#div_body').on('click','.tbl_tr',function(){ alert($(this).attr("kode")); });
});
</script>

和函数处理程序单击：

$(".tbl_tr").click(function(){
          alert($("tr").attr("kode"));
          //some function
       });

是的..提到我改变jquery的答案：

<script language="javascript1.5" src="jquery-1.7.2.min.js"></script>
<script language="javascript1.5" src="generate_tabel.js"></script>

和

   $(".tbl_tr").on("click", function(){
      alert($(this).attr("kode"));
      //some function
    });

在 Firefox 错误控制台中没有给出消息。但警报没有运行。

这是我的代码：jsfiddle

已解决：我为模拟编写了简单的代码。

<script src="jquery-1.7.2.min.js"></script>
======================================================================<br />
<input type="button" id="btn" value="OK">
<div id="aaa"><a href=""><span >aaaaaaa</span></a>
</div>
<script>
$('#btn').click(function(){
        $('#aaa').html(' <table id="tbl" border=1><tr code="k1" class="ss"><td><a>aaa</a></td></tr><tr code="k2" class="ss"><td><a>bb</a></td></tr><tr code="k3" class="ss"><td><a>cc</a></td></tr></table>');
});
$('#aaa').on('click','#tbl tr a',function(a){
    alert($(this).closest('tr').attr('code'));
});
</script>

谢谢你们。我爱你..

4

2 回答 2

0

由于您正在动态创建表。你需要委托。由于看起来您正在#div_body元素内部创建表格，因此它可能是最有效的父元素。使用元素时，该元素必须存在于 dom 中

通过使用委托，.tbl_trclick 事件将冒泡到#div_body，这就是处理事件的地方。通过这样做，它还减少了附加的事件处理程序的数量，因为通过绑定，您将为每个.tbl_tr元素附加一个，现在您只有一个处理事件

如果使用 jQuery 1.7+ 使用.on()

$('#div_body').on('click','.tbl_tr',function(){
    alert($(this).attr("kode"));
});

或.delegate()如果低于 1.7

$('#div_body').delegate('.tbl_tr','click',function(){
    alert($(this).attr("kode"));
});

在上面用于动态创建的元素

下面的两种风格最终是一样的

$(".tbl_tr").on("click", function(){
      alert($(this).attr("kode"));
      //some function
});
$(".tbl_tr").click(function() {
      alert($(this).attr("kode"));
      //some function
});

仅当您知道加载 dom 时元素将存在或在元素添加到 dom 后附加时才使用

于 2012-08-10T19:30:21.163 回答
0

在将点击事件分配给“.tbl_tr”之后，您可能正在“绘制”表格。

试试这样写：

$(".tbl_tr").on("click", function(){
          alert($(this).attr("kode"));
          //some function
});
于 2012-08-10T19:12:57.043 回答