Question

i have problem with my table that generate from function.

i need to get the clicked td attr and run some function.
but it doesn’t work.
what wrong with my code..?

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 code like this :

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

and the function handler click :

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

yes.. mention the answer i change the jquery :

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

and

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

in Firefox error console no give message. but the alert doesnt run.

here my code: jsfiddle

solved:
i wrote simple code for simulation.

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

thank you all. I love you..

Answer 1

Since you’re dynamically creating the table. You need to delegate. Since it looks like you are creating the table inside of the #div_body element, it would probably be the most efficient parent element to use. The element must exist in the dom when working with the element

By using delegation the .tbl_tr click event will bubble up to the #div_body and that is where the event will be handled. By doing that it also reduces the amount of event handlers attached since by binding you would have attached one for every .tbl_tr element, now you just have one handling the events

If using jQuery 1.7+ use .on()

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

or .delegate() if below 1.7

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

Use above for dynamically created elements

---

The two styles below are eventually the same thing

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

Use only when you know the element will be there when dom is loaded or you are attaching after the element has been added to the dom