1

テーブル データとしてリンクを含むテーブルがあり、テーブルの行をクリックできるようにしたいと考えています。これには、次の 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');
        });
    });
});

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

4

1 に答える 1

1

あなたは間違った方向に進んでいます。

クリックイベントのバインド解除と再バインドをいじくり回す代わりに、アンカー要素のイベントも処理し、ハンドラー関数自体でクリックされたものをチェックして、適切なアクションを実行します。新しいコードは次のようになります。

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

ライブテストケース。

于 2012-04-10T07:42:52.490 に答える