Question

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

我需要点击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>

谢谢大家。我爱你..

Answer 1

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

尝试这样写：

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

Answer 2

因为您正在动态创建表格。你需要委派。由于看起来您正在#div_body元素内创建表，因此它可能是最有效的父元素。使用元素

时，元素必须存在于dom中

通过使用委派，.tbl_tr点击事件将冒泡到#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后附加时使用

如何处理事件单击以获取attr并运行某些功能

2 个答案: