テーブルの行をクリック可能にするときに問題が発生する

Question

テーブルのデータとしてリンクを含むテーブルがあり、テーブルの行をクリックできるようにしたい。このために私は次のjQueryを使用します。この

機能が似ている

1. それがアクションを呼び出すと、そのためのデータが新しいウィンドウに表示された行をクリックします。
2. テーブルデータリンクをクリックすると、新しいウィンドウでリンクが開き、行クリックの操作はありません。

コード：

jQuery(function($) { 
    $('tbody tr[data-href]').addClass('clickable').click(function() { 
     window.open($(this).attr('data-href'),'mywin','left=20,top=20,width=1240,height=500,toolbar=1,resizable=0'); 
    }).find('a').hover(function() { 
     $(this).parents('tr').unbind('click'); 
    }, function() { 
     $(this).parents('tr').click(function() { 
      window.location = $(this).attr('data-href'); 
     }); 
    }); 
}); 

今の問題は、私が最初にテーブルデータのリンクをクリックして、その後私は、テーブルの行をクリックしたときに、それが新しいウィンドウで開かれていないが、現在のページがページにリダイレクトということですこれは新しいウィンドウで開かれることが予想される。

Answer 1

あなたは間違った方向に行きます。

clickイベントのバインドを解除して再バインドするのではなく、アンカー要素のイベントも処理し、ハンドラ関数自体をクリックして適切な処理を実行します。新しいコードは、

jQuery(function($) { 
    $('tbody tr[data-href]').addClass('clickable'); 
    $('tbody').on('click', 'tr[data-href],a', function(evt) { 
     if (this.nodeName.toLowerCase() === "a") { 
      document.location = this.href; 
     } 
     else { 
      window.open($(this).attr('data-href'),'mywin','left=20,top=20,width=1240,height=500,toolbar=1,resizable=0'); 
     } 
     evt.stopPropagation(); 
     return false; 
    }); 
});​ 

Live test caseです。