使数据表行可点击

Question

我有一个使用 datatables.net 通过 ajax 加载数据的表。我想这样做，以便当用户单击一行时，它链接到附加有该行主键的 get 变量的 URL。

我对 Datatables 比较陌生，所以我的黑客尝试/想法是使用 Datatables 使用我的主键在列的两个类中应用两个类。这两个类是 hide (css of display:none) 和 projectID (标识该列以便我可以使用 jquery 获取它的值)。我能够使用 aoColumns 属性应用这些类，它确实隐藏了列并附加了 projectID 类。但是我认为由于 Datatables 正在创建表，因此它阻止了我使用

$('#project-table tr').click(function(){alert('clicked');}

所以我尝试了

$('#project-table tr').live('click',function(){alert('clicked');})};

也无济于事。

我想有一种比我用来制作可点击行更好的方法，链接到带有附加主键获取变量的页面，但我找不到示例。如果有人有一个示例的链接或者可以为我指出正确的方向，我们将不胜感激。

Answer 1

我有一个使用 datatables.net 通过 ajax 加载数据的表

这意味着在页面加载期间绑定到元素的任何事件处理程序都将不适用于加载的数据，除非该事件被委托给静态父元素——这意味着该元素永远不会被删除或替换，并且将无限期存在.

$(document).on('click', '#project-table tr', function(){
    alert('This is a click on a dynamic element');
});

在这里，我们将点击事件绑定到document。如果愿意，您可以选择更接近的元素（以提高性能）。

Here is the link to the documentation for .on()

附带说明——在 jQuery 1.9 + 中，一些函数已被删除。其中之一是.live() 函数，它已被.on() 方法替换（如上所示）。这就是它不起作用的原因。此外，console 会告诉您这一点。当前的许多浏览器都带有自己的web inspector，否则您可以通过谷歌搜索您的浏览器并找到替代方案。