Disabling a link with jQuery while retaining script functionality

Question

I have a table of clickable links where each TR is also clickable, going to the same link as in the A tag.

I've run into the issue where clicking on the A tag causes two windows to be opened, both going to the same link. If I disable the A tag, when I click on the link, the script on the TR doesn't run.

<table class="dataTable">
<tbody>
    <tr class="odd">
        <td class=" sorting_1">
            <strong>
                <a href="http://www.google.ca/" target="_blank">Form1</a>
            </strong> - [HTML]
            <br /><span class="contentSummary"> form 1 summary</span>
        </td>
    </tr>
</tbody>

Is it possible to have the script run when clicking on the disabled A tag?

$('.dataTable a').click(function() {
    return false;
});

$('.dataTable tbody tr').click(function () {
    var url = $(this).find('a').attr('href');
    window.open(url);
}).hover(function () {
    $(this).toggleClass('hover');
});

jsfiddle example code here

Answer 1

Seeing that your tr is clickable and handles the event i would style the text to look like a link.

remove the a tag all together

<span class="faux_link">Your Link Text</span>

Style this with text-decoration: underline and whatever link attributes you want

Then change up your tr a bit to include the link data you need

<tr data-link="yourdestination.html">

Then change up your javascript a bit

$('.dataTable tbody tr').click(function () {
    var url = $(this).data('link'); //this right here
    window.open(url);
}).hover(function () {
    $(this).toggleClass('hover');
});