鉴于jQuery Datatable,我如何确定某个列上是否发生了点击?
我有一个jQuery DataTable实例,其中填充了各种数据,这些数据是数据库记录的摘要。目前,单击一行会打开一个对话框,其中包含相应数据库记录的所有字段。如果单击的列具有指定的类'comments'
,我想要做的是打开第二个对话框目前,我通过
初始化数据表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
]
});
并将一个click事件绑定到动态填充的行:
$("#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")
返回undefined,当我在Firebug中放置断点时,以下命令和输出结果
$(this).attr("id") prints out row id
$(this).closest("td") prints out jQuery( )
$(this).closest("td").text() prints out "", should be 0
答案 0 :(得分:2)
问题出在this
指向tr
,因为您知道td
是tr
的孩子,因此您无法使用this
target
找到点击的td
相反,您可以使用event
的{{1}}属性来查找事件的实际来源,并找到该元素的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
});
答案 1 :(得分:1)
我认为有一个错误。
tr没有最接近的td,因为td是tr的子节点。 与tr最接近的元素是常规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
});