0

2つのリンクを含むテーブルがあります。

  • 「ボタン」をクリックすると、リンクは「page1」をターゲットにするはずです

  • 行全体をクリックすると、「page2」をターゲットにする必要があります

私は現在jQueryJavascriptで立ち往生しています-誰かが私にアドバイスを与えることができますか？

HTML＆JQuery / JS

<tr>
  <td><a href="page2.html" class="info"><img src="img/img.png" alt="image" class="tlogo"/></a></td>
  <td>Some Text</td>
  <td><a href="page1.html" class="tbutton">Go to page1</a></td>
</tr>

    $(document).ready(function() {
        $('#myTable tr').click(function() {
            var href = $(this).find("a").attr("href");
            if(href) {
                window.location = href;
            }
        });
    });
4

4 に答える 4

2

ボタンをクリックすると、行クリックも発生します。それを止める方法は使用することですevent.stopPropagation();

これにより、その後に発生するイベントがキャンセルされるため、それをボタンクリックイベントに入れると、行クリックイベントは発生しません。

于 2012-07-04T10:59:00.133 に答える
2

次のようなものを試してください：

$(document).ready(function() {
    $('#myTable a').click(function(e){
        window.location = $(e.currentTarget).attr('href');
        e.stopPropagation();
    });

    /* Assuming that the link you want to go to on clicking the row is in the first td */

    $('#myTable tr').click(function(e) {
        window.location = $('#myTable tr a',e.currentTarget).attr('href');
        e.stopPropagation();
    });
});
于 2012-07-04T11:03:57.250 に答える
0

あなたは一つのことをすることができます：- 

<tr>
  <td><a href="page2.html" class="info"><img src="img/img.png" alt="image" class="tlogo"/></a></td>
  <td>Some Text</td>
  <td><a href="page1.html" class="tbutton">Go to page1</a></td>
</tr>

$(document).ready(function() {
    $('.tbutton').click(function() {            
        window.location.href = page1.html;
    });
 $('"#mytable tr').click(function() {            
            window.location.href = page2.html;
        });
});


これがお役に立てば幸いです:)

于 2012-07-04T11:03:16.387 に答える
0

作業デモ http://jsfiddle.net/5ykup/4/

API：http ://api.jquery.com/event.stopPropagation/ it：イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。

お役に立てれば、

コード

   $("table tr").click(function(){
       alert("go to page1");        
    });

    $("table tr td a").click(function(event){
        alert("go to PAGE == 2"); 
        event.stopPropagation();
    });
于 2012-07-04T11:07:23.537 に答える