Jquery, prevent onclick = window.location on parent element
I have a table with data like:
<table>
<tr onclick="window.location='download.php?id=1'">
<td>Program 1<br/>Short Description 1 (<a onclick="$.popup.show('Install Instructions', 'Instructions pulled from DB here')">Instructions</a>)</td>
<td>Added by user and date/time here<td>
<td>Filesize here<td>
<td><a href="edit.php?id=1">Edit</a> - <a href="delete.php?id=1">Delete</a><td>
</tr>
(repeat TRs for more programs pulled from DB)
</table>
The problem I ran into is that when you click on the (Instructions) link, it should pop up an instructions window. It does this, but it also triggers TR onclick. This way I get the popup for a split second, then it goes to download.php.
Is there some way to prevent it from burning TR onclick? Jquery is preferred, but i don't mind simple javascript solutions.
source to share
Basically you need to stop the propagation of events using event.cancelBubble (for IE) or event.stopPropagation () (for everyone else). The solution given from quirksmode (which I used earlier) should do the following:
<script type="text/javascript">
var instructions = function(e) {
// Get the correct event in a cross-browser manner, then stop bubbling/propagation.
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
// Do what you want now
$.popup.show('Install Instructions', 'Instructions pulled from DB here');
}
</script>
Then your script will call it:
<td>Program 1<br/>Short Description 1 (<a onclick="instructions(event)">Instructions</a>)</td>
(Sure, you could put it all in a row, but it's a bloody mess.)
You can also find this question by covering.
source to share
stopPropogation is the one you want.
http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29
source to share