jquery - 防止子按钮触发分配给父级的 jquery 事件

Question

我试图阻止表格行内的按钮触发附加到该行的事件

此解决方案有效，但我不喜欢它：

$('table.orders tr.item').live('click',function(){
    var id=$(this).attr('hrf');
    document.location.href = id;
});
$('table.orders tr.item .pdfIcon').live('click',function(e){
e.stopPropagation();
}); 

我不喜欢附加第二个事件以防止第一个事件工作的想法。我应该能够从选择中删除它。

任何人都可以提出更好的方法吗？

Answer 1

$('table.orders').on('click', 'tr.item', function (event) {
    if (!$(event.target).hasClass('pdfIcon')){
        var id=$(this).attr('hrf');
        document.location.href = id;
    }
});

Answer 2

尝试

$('table.orders').on('click', 'tr.item', function(event) {
    if ($(event.target).hasClass('pdfIcon')) {
        return;
    }
    var id = $(this).attr('hrf');
    document.location.href = id;
});

演示：小提琴

Answer 3

怎么样

$('table.orders tr.item').live('click',function(e){
    if ($(e.target).is('.pdfIcon')) return;
    var id=$(this).attr('hrf');
    document.location.href = id;
});