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

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

  •  0
  • bdl  · 技术社区  · 15 年前

    我试图将一个单击事件委托给一个包含具有特定属性的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 回复  |  直到 15 年前
        1
  •  1
  •   Matchu    15 年前

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

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

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

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

        2
  •  2
  •   Java Drinker    15 年前

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

    $('tr:has(td[data-imgurl])').click(function(evt){
        // stuff here...
    });
    
        3
  •  0
  •   Alexis Abril    15 年前

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

    我唯一要更改的是选择器语法。由于您正在动态添加属性“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执行的一种简单方法。

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

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