Question

所以这是有问题的表格行：

<table cellpadding="0" cellspacing="0" class="list-table">

<tr class="altrow">
    <td><a href="/customers/view/114"> John </a></td>
    <td> Doe </td>
    <td> New York</td>
    <td> U.S. </td>
    <td>
        <form action="/customers/move/114" name="post_53d64eb8923c0608217922" id="post_53d64eb8923c0608217922" style="display:none;" method="post"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="da894058fd17e5e886316512509967a6969af90f" id="Token366355528"/><div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="d4431eb33bd022aaf88ee331efb5b9a47e305ab9%3A" id="TokenFields1654703212"/><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked97706993"/></div></form><a href="#" onclick="if (confirm('Are you sure you want to move this customer?')) { document.post_53d64eb8923c0608217922.submit(); } event.returnValue = false; return false;"><img src="/img/move.png" alt="move" width="30px" height="30px" title="Move to archive" /></a>  
    </td>
</tr>

</table>

整行充当第一个TD中包含的链接。这是由jQuery完成的：

$('tr.altrow').click( function(e) {
    if(!$(e.target).closest('[target="_blank"]').length) window.location = $(this).find('a').attr('href');
}).hover( function() {
    $(this).toggleClass('hover');
 });

问题在于，无论何时点击最后TD（表单），都会要求用户进行确认，但之后会调用第一个链接(<a href="/customers/view/114">)而不是表单操作。如果jQuery被注释掉，那么一切都很完美。

我想要实现的是，如果用户点击最后一张道明图像，则会调用表单操作，如果点击位于行的其他位置，则会调用<a>

非常感谢任何关于如何使这两个链接以这种方式工作的指导或建议。

Answer 1

在最后td（表单）上添加一个点击处理程序。确保捕获此单击事件，并防止它冒泡到tr元素。

$('tr.altrow').find('td').last().click(function(event){
    event.stopPropagation();
});

进一步阅读：event.stopPropagation()

表行充当链接的问题

1 个答案: