Question

我有一个包含2个链接的表，

如果我点击“按钮”，该链接应定位为“page1”
如果我点击整行，则应该定位'page2'

我目前仍然坚持使用jQuery Javascript - 有人可以给我一个建议吗？

HTML＆amp; 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;
            }
        });
    });

Answer 1

如果单击该按钮，也会触发行单击。阻止它的方法是使用event.stopPropagation();

这将取消之后将触发的任何事件，因此如果您将其放入按钮单击事件中，则行点击事件将不会触发。

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

Answer 3

你可以做一件事： -

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

希望这有用：）

Answer 4

工作演示 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();
    });

表有两个链接 - 表行可点击 - jQuery

4 个答案: