CODEWITHSUNDEEP
jqueryhtml
Isaac
Isaac

Reputation: 277

Link within link issue: Placing a link inside a clickable element

I have an HTML table which contains group rows that allow their child rows to be expanded and collapsed via jQuery when clicked. Each group row contains a single column that spans across all of the table's columns. Within this column is a link that opens a new window.

The problem occurs when clicking the new window link. Not only does the new window open, but clicking the link causes the group row's onclick event to fire which toggles the group of rows. Any ideas on how I can prevent the toggle when the new window link is clicked while allowing toggle when the row is clicked anywhere else?

<tr class="groupRow" onclick="toggleChildRows()">  
    <td colspan="@tableColumnCount">
        <a href="@newWindowPath">New Window</a>
    </td>
</tr>

Upvotes: 2

Views: 1153

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

I think there are better ways to make this, but you can stop the propagation (bubbling) of the link and it will work:

$('a').on('click', function(event) {
  event.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onclick="alert('yeah');">
  <a href="@newWindowPath">New Window</a>
  <div>click this</div>
</div>

Upvotes: 4

Related Questions