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();
}); 

最初のイベントが機能しないようにするために2番目のイベントを添付するというアイデアは好きではありません。選択から削除できるはずです。

誰かがより良い方法を提案できますか？

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 tr.item').live('click',function(e){
    if ($(e.target).is('.pdfIcon')) return;
    var id=$(this).attr('hrf');
    document.location.href = id;
});

Answer 3

試す

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

デモ：フィドル