CODEWITHSUNDEEP
javascriptjqueryhtml
Domas
Domas

Reputation: 1133

Issue with table row acting as a link

So here is the table row in 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>

The whole row is acting as a link included in the first TD. This is done by jQuery like this:

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

The problem is that whenever the last TD (the form) is clicked on, the user is asked for the confirmation, but after that the first link (<a href="/customers/view/114">) is called instead of the form action. If the jQuery is commented out it all works perfectly.

What I want to achieve is that if a users clicks on the last TD's image, the form action would be called and if the click is anywhere else on the row, the <a> would be called.

Any guidance or suggestion on how to make both of the links work this way is much appreciated.

Upvotes: 1

Views: 65

Answers (1)

Daniel Apt
Daniel Apt

Reputation: 2638

Add a click handler on the last td (the form). Make sure to catch this click event, and prevent it from bubbling up to the the tr element.

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

for further reading: event.stopPropagation()

Upvotes: 3

Related Questions