我有一个表,其中包含多个配置文件图像列表的下拉菜单。我已经用照片的DB id标记了list元素,因此我可以执行相关的操作。我把我的表编码看起来像这样:
<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,还是会以这种方式工作?
答案 0 :(得分:2)
你有李&gt; a&gt;你的结构中有.icon-pencil,但是你在li click上寻找this.className(很明显,这就是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;
});
最干净的解决方案是将ID仅设置在.dropdown-menu上,这样它们就是唯一的,然后通过.closest('ul')代替.closest('li')。
PS:拥有重复的ID总是很糟糕。