Question

我有一个带有图像按钮的呈现HTML表格，我可以使用它来取消看起来像这样的项目：

Product ID     Product        Qty       Cancel
12345          Widget A       1         ID=ImageButton-12345 Class=ImageButtonList
23456          Widget B       1         ID=ImageButton-23456 Class=ImageButtonList
34567          Widget C       1         ID=ImageButton-34567 Class=ImageButtonList

我想要做的是浏览ImageButtonList类中的每个项目，找出单击了哪个图像按钮。图像按钮本身（在PHP中）在HTML中标记为：

<img src="/images/cancel_btn.jpg" class="ImageButtonList" id="ImageButton-12345">

jQuery可以这样吗？我确信它必须是，因为我已经看到样本迭代了属于一个类的所有项目。也许有些东西：

$('.ImageButtonList').each(function() {
    var element = $(this);

    // Here's where I'm stuck
});

我是否需要注册某种点击事件以便我可以将其关闭？

Answer 1

无需使用each ，您可以找到这样点击的内容：

$('.ImageButtonList').click(function(){
  alert('I was clicked, my id is ' + $(this).attr('id'));
});

更多信息：

Answer 2

$('.ImageButtonList').click(function() {
    // This will bind to all buttons
    alert('You clicked me!');
});

Answer 3

var when_img_clicked = function() {
    var element = $(this);    
    // "this" is the img element that is clicked.
    clicked_id = $(this).attr('id');
    // Separate the actual id from clicked_id 
};
$('.ImageButtonList').click( when_img_clicked );

Answer 4

如果可能的话，我建议将click-handler连接到表本身。因此，您不必遍历所有ImageButton，并且每个按钮只有一个事件处理程序而不是一个。然后，event.target

可以访问点击的按钮

$('#table').click(function(){
    alert(event.target.id + ' was clicked');
});

jQuery图像按钮新手问题

4 个答案: