代码之家 › 专栏 › 技术社区 › bdl

jquery选择器:仅将click事件委托给具有特定数据的tr元素

html5 html jquery

0

bdl · 技术社区 · 16 年前

我试图将一个单击事件委托给一个包含具有特定属性的td的tr元素,即。

<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>

目标是单击该行并检索该行的td“data imgurl”属性值,即图像的URI。这只是一个检索该值的测试。最后,我希望让点击处理程序在隐藏的DIV或lightbox中显示图像,但还不确定我想做什么。

我的选择器(仅在它将为实际td元素分配一个单击时有效:

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

注意,数据是从服务器端脚本动态创建的,“data imgurl”属性基于该脚本中的逻辑,因此只有实际具有图像的产品才被分配“data imgurl”属性。也许我认为这一切都是错误的,应该以某种方式将数据附加到行本身,但这是违反直觉的。

或者我应该将图像推到隐藏的td中,并为其分配一个class或rel属性?所以它存在于页面上,但是点击一下就会显示出来?现在的想法仍然是只有那些有实际图像的产品才可以点击。

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

<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>

和jQuery

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

3 回复 | 直到 16 年前

1

Matchu 16 年前

是的,我会把它推到那排。此数据定义产品,产品由一行而不是一个单元格表示。

不管怎样,如果你不使用 delegate ,将Click事件放在行上很容易。

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

用 代表 然而,事情变得更糟了,我不确定是否有人能这样做。

2

Java Drinker 16 年前

我认为选择行也是最好的…jquery有非常强大的选择器,并且有很多方法可以做到相同的事情,例如:

$('tr:has(td[data-imgurl])').click(function(evt){
    // stuff here...
});

3

0

Alexis Abril 16 年前

您当前设置脚本的方式是附加事件的一种非常好的方式。存储数据的位置是任意的,但是您访问数据的方式可以为您提供性能优势。

我唯一要更改的是选择器语法。由于您正在动态添加属性“data imgurl”,因此还需要添加一个css类。这可以是您选择的任何类别,如下所示:

<td data-imgurl="images/p2.png" class="myProduct">product two</td>

然后,您可以使用以下选择器访问:

$("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执行的一种简单方法。

懒惰地加载图像(正如您现在所拥有的)是一个很好的主意,特别是如果您确实有大量的产品。我喜欢你在那里做的事;)

有关“委托”与直接将单击事件附加到对象的说明:在此方案中,委托是可以的,如果动态添加要稍后单击的行/单元格,则建议使用委托。