0

我有一个表格，其中包含用于个人资料图像列表的多个下拉菜单。我已经用照片的 DB id 标记了列表元素，这样我就可以执行相关的操作。我已将我的表格编码为如下所示：

<table class="table table-bordered">
<tbody>
<tr>
  <td><img src="/photos/files/5/m/131309a4fb918110ed1061e90a715eca.jpeg"/></td><td><div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li id="5"><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li id="5"><a href="#"><i class="icon-trash"></i> Delete</a></li>
  </ul>
</div>
</tr>
<tr>
  <td><img src="/photos/files/5/m/b19102d8ba1158e2a139ffa84e8e8540.jpeg"/></td><td><div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li id="7"><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li id="7"><a href="#"><i class="icon-trash"></i> Delete</a></li>
  </ul>
</div></tr>    
</tbody>
</table>

我的 jquery 尝试如下但不工作：

    $('.dropdown-menu').on('click', 'li', function(e){

         if ($(this).attr('class')=='icon-pencil') {
                var id = $(this).attr('id');
                alert("ID= " + id);
         }

    });

我从来没有点击过我的警报代码，所以我在这里错过了什么？

还有更好的方法来跟踪照片 ID 或者它们会以这种方式工作吗？

4

1 回答 1

2

您的结构中有 li > a > .icon-pencil 但您正在寻找 this.className on li click（显然是 li）。试试这个：

$('.dropdown-menu').on('click', 'li', function(){
    if ($(this).find('icon-pencil').length > 0) {
        var id = this.id;
        alert("ID= " + id);
    }
});

更简洁的方法是监听锚点上的点击，因为这是通常的点击元素：

$('.dropdown-menu').on('click', 'a', function(){
    if ($(this).children('.icon-pencil').length > 0) {
        var id = $(this).closest('li').attr('id');
        alert("ID= " + id);
    }
    return false;
});

最干净的解决方案是仅在 .dropdown-menu 上设置 ID，因此它们是唯一的，然后通过 .closest('ul') 而不是 .closest('li') 获取它。

PS：重复的 ID 总是不好的。

于 2012-07-02T13:55:21.143 回答