jQuery选择器：将click事件委托给仅包含特定数据的tr元素
我正在尝试将click事件委托给包含具有特定属性的TD的TR元素，即
product one price product two price
目标是单击该行并检索该行的TD“data-imgurl”属性值，即图像的URI。 这只是检索该值的测试。 最终我想让点击处理程序在隐藏的DIV或灯箱中显示图像，不知道我还想做什么。
我的选择器（仅适用于它将为实际的TD元素分配一个点击：
$("table").delegate("tr td[data-imgurl]", "click", function(evt){ alert( $(this).attr("data-imgurl") ); });
请注意，数据是从服务器端脚本动态创建的，“data-imgurl”属性基于该脚本中的逻辑，因此只有实际拥有图像的产品才会被赋予“data-imgurl”属性。 也许我看错了，并且应该以某种方式将数据附加到行本身，但这是违反直觉的。
或者我可能实际上是将图像推入隐藏的TD并为其分配类或rel属性？ 所以它存在于页面上，然后点击显示它？ 这个想法仍然只是那些带有实际图像的产品可以点击。
编辑好的，我通过将数据推送到实际的行本身来解决这个问题。 这样做更有意义，每一行都是一个记录。 解：
product one price product two price
和jQuery
$("table").delegate("tr[data-imgurl]", "click", function(evt){ alert( $(this).attr("data-imgurl") ); });
是的，我会把它推到行上。 此数据定义产品，该行由行而不是单元格表示。
无论如何，如果您没有使用delegate ，将click事件放到行上会很容易。
$('table tr td[data-imgurl]').parent().click(function (evt) { // on tr click });
然而，对于delegate来说，事情变得更加混乱，我不能立刻确定是否可以这样做。
我认为选择行也是最好的… jQuery有非常强大的选择器，并且有许多方法可以做同样的事情，即：
$('tr:has(td[data-imgurl])').click(function(evt){ // stuff here... });
您当前设置脚本的方式是附加事件的完美方式。 存储数据的位置是任意的，但您访问它的方式可以为您带来性能优势。
我唯一要改变的是选择器语法。 由于您正在动态添加属性“data-imgurl”，因此还要添加一个css类。 这可以是您选择的任何类，如下所示：
product two
然后，您可以使用以下选择器访问它：
$("table").delegate("tr td.myProduct", "click", function() { alert($(this).attr("data-imgurl")); //or if you have the metadata plugin //alert($(this).metadata().imgurl); });
我更改选择器的原因是jQuery检查属性的方式。 避免在选择器中使用大量项目的属性是加速js执行的简单方法。
延迟加载图像的想法（如你所知）是一个好主意，特别是如果你有大量的产品。 我喜欢你在那里做的;）
关于“委托”与直接将单击事件附加到对象的注释：在此方案中委托是正常的，如果要动态添加要在以后单击的行/单元格，建议使用委托。