jQuery选择器：委托单击事件只tr元素与特定的数据 [英] jQuery selector: delegate click event to only tr elements with specific data

问题描述

我尝试将点击事件委托给包含具有特定属性的TD的TR元素，即

  <表> 
< tr> 
< td>产品一< / td> 
< td>价格< / td> 
< / tr> 
< tr> 
< td data-imgurl =images / p2.png>产品二< / td> 
< td>价格< / td> 
< / tr> 
< / table> 
  

目标是点击行并检索该行的TDdata-imgurl属性值，即图像的URI。这只是一个检索该值的测试。最终，我想让点击处理程序在隐藏的DIV或灯箱中显示图像，不知道我还想做什么。

我的选择器只是因为它会为实际的TD元素指定一个点击：

  $（table）。delegate（tr td [data-imgurl]，click，function（evt）{
 alert（$（this）.attr（data-imgurl））; 
}）; 
  

请注意，数据是从服务器端脚本动态创建的，data-imgurl属性基于逻辑该脚本，以便只有实际上具有图像的产品才会被赋予一个data-imgurl属性。也许我认为这一切都是错误的，并且应该以某种方式将数据附加到行本身，但这是违反直觉的。 / p>



或者也许我应该将图片推送到一个隐藏的TD中，并为其分配一个类或者rel属性？所以它存在于页面上，但是点击显示它呢？想法仍然是只有那些与实际即时通讯产品年龄可以点击。



编辑
好​​吧，我通过将数据推入实际行本身来解决这个问题。这样做更有意义，每一行都是一个记录。解决方案：



 < table> 
< tr> 
< td>产品一< / td> 
< td>价格< / td> 
< / tr> 
< tr data-imgurl =images / p2.png> 
< td>产品二< / td> 
< td>价格< / td> 
< / tr> 
< / table> 
  

和jQuery



 （$（this））.attr（data-imgurl ））; 
}）; 
  




解决方案

是的，我会将它推到行上。这些数据定义了产品，它由一行代表，而不是一个单元格。

无论如何，如果您不使用委托


  $（'table tr td [data code>，这可以很容易地将click事件放到行上。点击（函数（evt）{
 //在tr点击
}）; 
  

然而，使用委托 ，我不能立即确定是否可以这样做。

I'm trying to delegate a click event to a TR element that contains a TD with a specific attribute, i.e.

<table>
  <tr>
    <td>product one</td>
    <td>price</td>
  </tr>
   <tr>
    <td data-imgurl="images/p2.png">product two</td>
    <td>price</td>
  </tr>
</table>

The goal is to click on the row and retrieve that row's TD "data-imgurl" attribute value, i.e. the URI for an image. This is just a test to retrieve that value. Ultimately I'd want to have the click handler show the image in a hidden DIV or maybe lightbox, not sure what I want to do yet.

My selector (that works only in that it will assign a click to the actual TD element:

$("table").delegate("tr td[data-imgurl]", "click", function(evt){
    alert( $(this).attr("data-imgurl") );
});

Note, the data is created dynamically from a server-side script, and the "data-imgurl" attribute is based on logic in that script, so that only products that actually have images are assigned a "data-imgurl" attribute. Perhaps I'm looking at it all wrong, and should somehow attach the data to the row itself, but that is counter-intuitive.

Or maybe I should be actually pushing the image into a hidden TD and assigning it a class or rel attribute? So it exists on the page but then a click reveals it? The idea still being that only those products with actual images can be clickable.

EDIT Ok, I resolved this by pushing the data into the actual row itself. Makes more sense that way, each row is a record. Solution:

<table>
  <tr>
    <td>product one</td>
    <td>price</td>
  </tr>
   <tr data-imgurl="images/p2.png">
    <td>product two</td>
    <td>price</td>
  </tr>
</table>

And the jQuery

$("table").delegate("tr[data-imgurl]", "click", function(evt){
    alert( $(this).attr("data-imgurl") );
});

解决方案

Yep, I'd push it onto the row. This data defines the product, which is represented by a row, not a cell.

Regardless, if you weren't using delegate, it would be easy to put the click event onto the row.

$('table tr td[data-imgurl]').parent().click(function (evt) {
 // on tr click
});

With delegate, however, things get messier, and I'm not immediately sure if one can do it that way.

这篇关于jQuery选择器：委托单击事件只tr元素与特定的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！