1

给定一个 jQuery 数据表，我如何确定某个列上是否发生了点击？

我有一个 jQuery DataTable 实例，其中填充了作为数据库记录摘要的各种数据。目前，单击一行会打开一个对话框，其中包含相应数据库记录的所有字段。如果单击的列具有指定的类“评论”，我想要做的是打开第二个对话框

目前，我通过初始化数据表

timelineTable = $("#timeline_table").dataTable({
    "aLengthMenu" : [
        ["-1", "10", "25", "50", "100"],
        ["All", "10", "25", "50", "100"]
    ],
    "iDisplayLength" : -1,
    "aoColumnDefs" : [
        {"bVisible" : false, "aTargets" : [6, 8] },
        {"sClass" : "comments", "aTargets" : [7]} //adds class 'comments' to this column index
    ]
});

并将点击事件绑定到动态填充的行：

$("#timeline_table").on("click", "tbody tr", timelineTableClickHandler);

这适用于打开详细信息对话框的默认操作，但我想将函数处理程序修改为

$("#timeline_table").on("click", "tbody tr", function(e){
  if ($(this).closest("td").hasClass("comments")) 
    //call secondary dialog open event
  else
    //call default dialog open event
});

但是，$(this).closest("td").hasClass("comments")返回未定义，当我在 Firebug 中设置断点时，以下命令和输出结果

$(this).attr("id") prints out row id
$(this).closest("td") prints out jQuery( )
$(this).closest("td").text() prints out "", should be 0
4

2 回答 2

2

这里的问题this是指向tr，因为你知道td它是一个孩子，tr所以你不能使用.closest() onthis来找到点击的 td

相反，您可以使用 的target属性event来查找事件的实际来源并找到该closest元素的 td

$("#timeline_table").on("click", "tbody tr", function(e){
  if ($(e.target).closest("td").hasClass("comments")) 
    //call secondary dialog open event
  else
    //call default dialog open event
});
于 2013-08-30T00:38:42.853 回答
1

我认为有一个错误。

tr 没有最接近的 td，因为 td 是 tr 的子代。最接近 tr 的元素是 regularry tbody 或 table。

要访问 td，您必须使用：

$("#timeline_table").on("click", "tbody tr", function(e){
 if ($(e.target).children("td:eq(indexNo)").hasClass("comments")) 
  //call secondary dialog open event
 else
  //call default dialog open event

});

于 2013-08-30T00:52:54.663 回答