0

私はdataTablesを使用して、PHPスクリプトからデータを取得、表示、整理しています（これにより、MySQLデータベースから情報が取得されます）。

私のdataTablesテーブル

次のコードを使用して、dataTablesは情報を取得し、それをテーブルに配置します。

$('#content div').html( '<table id="example"></table>' );
var oTable = $('#example').dataTable( {
    "bJQueryUI": true,
    "bProcessing": true,
    "bServerSide": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": "dataTables.php",
    "aoColumns": [
        /* UID */           { "bSearchable": false,
                                "bVisible":  false },
        /* Datetime */      { "asSorting": [ "desc" ] },
        /* Staff Name */    null,
        /* Room */          null,
        /* Reason */        null,
        /* Urgency */       null,
        /* Processed? */    null ],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        var sDirectionClass;

        if ( aData[6] === null ) {
            sDirectionClass = "new";
            if ( row % 2 !== 0 )
                sDirectionClass = "new_odd";
        } else {
            sDirectionClass = "std";
        }

        row++;

        $(nRow).addClass( sDirectionClass );
        return nRow;
    }
} );

このほとんどは非常に簡単だと思います。この関数はsAjaxSourceプロパティを取得してdataTables.phpファイルを調べます。ファイルはMySQLDBを読み取り、JSONでエンコードされた形式で情報を返します。

これはすべて正常に機能しますが、テーブルの列の1つをクリック可能なリンクに変換しようとしています。

このための簡単なPHPは次のとおりです。

if ( $aColumns[$i] == "Processed" )
{
    $link = '<img src="tick.png" id="' . $aRow[ $aColumns[0] ] . '" />';
    $row[] = ( empty( $aRow[ $aColumns[$i] ] ) ) ? $link : $aRow[ $aColumns[$i] ];
}

そのための疑似は基本的にif Processed field is NULL display an image with the UID of that row; otherwise display the value of Processed fieldです。

チェックまたは日付

私が今やりたいのは、その画像をJSクリック可能にしてAJAX関数を実行できるようにすることです。私は次のコード（上記のJSの直後のinsitu）だと思いました：

oTable.find('img').click(function(){
    var process = $(this).attr("id");
    $.ajax({
        url: "check_alerts.php",
        data: { process: id }
    }).done(function() { 
        oTable.fnDraw(false);
    });
});

残念ながら、何もしないようです。これは、作成しているDOMで作成されているため、上記の関数を実行するとタグimgが見つからないためだと思います。img

これらの画像がAJAX関数を実行するようにコードを修正するにはどうすればよいですか？

前もって感謝します、

4

3 に答える 3

1

動的コンテンツのイベントをバインドすることを特に意図したjquery.on（）を使用する必要があります。

これを試して：

//replace table with the table pointer (class,id)
$('table').on('img','click',function(){
   //do your thing
});
于 2012-08-08T09:50:28.467 に答える
0

新しいDOM要素がクリックイベントもリッスンするようにするには、「on」を使用する必要があります。

oTable.on("click", "img", function() {
  var process = $(this).attr("id");
  $.ajax({
    url: "check_alerts.php",
    data: { process: id }
  }).done(function() { 
    oTable.fnDraw(false);
  });
});

ドキュメントを参照してください

于 2012-08-08T09:51:24.477 に答える
0

ファイアバグを使用して、画像タグが生成されるかどうかを確認しましたか。Firebugコンソールタブで画像クリックバインディング機能を実行してみてください。それがうまくいく場合は、おそらく元のページ実行サイクルでクリックイベントをバインドしようとしているのが早すぎます。

于 2012-08-08T09:54:36.297 に答える