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文件，该文件只是读取 MySQL DB 并以 JSON 编码格式返回一些信息。

这一切都很好，但我正试图将我的表格列之一变成可点击的链接。

简短的 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-clickable 以运行 AJAX 功能。我认为下面的代码（在上面的JS之后立即原位）：

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

不幸的是，它似乎什么也没做。我想这是因为img我正在创建的 DOM 是在 DOM 中创建的，因此当上述函数运行时，它不会找到任何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

您是否尝试使用 firebug 来查看是否生成了图像标签。比尝试在 firebug 控制台选项卡中运行图像单击绑定功能。如果这可行，那么您可能正试图在原始页面执行周期中过早地绑定点击事件。

于 2012-08-08T09:54:36.297 回答
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 回答