1

関数から生成するテーブルに問題があります。

クリックされたtdattrを取得し、いくつかの関数を実行する必要があります。しかし、それは機能しません。私のコードの何が問題なのか..？

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

クリックイベントを「.tbl_tr」に割り当てた後、おそらくテーブルを「描画」しています。

このように書いてみてください：

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

テーブルを動的に作成しているので。委任する必要があります。要素内にテーブルを作成しているように見えるので、#div_bodyおそらくそれが最も効率的な親要素です。要素を操作するときは、要素がdomに存在する必要があります

委任を使用すると、.tbl_trクリックイベントがにバブルアップし、#div_bodyそこでイベントが処理されます。.tbl_trそうすることで、アタッチされるイベントハンドラーの量も減ります。これは、バインドすることで、要素ごとに1つアタッチすることになり、イベントを処理するのは1つだけになるためです。

jQuery 1.7以降を使用する場合は、.on（）を使用してください

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

または、1.7未満の場合は.delegate（）

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

動的に作成された要素には上記を使用します

以下の2つのスタイルは、最終的には同じものになります

$(".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 に答える