How to prevent .on('click') function working for a link in a table row
<p>I have a table that, when a row is clicked on that row's textboxes and buttons show and its labels hide. I've now added a link in the last column that I need to function normally, but <strong>not</strong> cause the row to got into "edit" mode, but only when the link itself is clicked.</p>

<p>Here's the code for a row:</p>

<pre><code>&lt;tr class="viewEditRow rowBorder" style="cursor: pointer;"&gt;
    &lt;td class="deleteBranch"&gt;
        &lt;input type="checkbox" class="chkDeleteBranch" name="deleteBranches[]" value="1"&gt;&lt;br&gt;
        &lt;input type="submit" class="cancelListEditBranch edit hideOnLoad" value="Cancel" title="Cancel editing this branch"&gt;&lt;br&gt;
        &lt;input type="submit" class="submitListEditBranch edit hideOnLoad" value="Save" title="Save the changes"&gt;
    &lt;/td&gt;
    &lt;td class="viewEditBranchName"&gt;
        &lt;label class="viewBranchName detailDisplay"&gt;Atlanta&lt;/label&gt;
        &lt;input type="text" class="edit editBox editName hideOnLoad" value="Atlanta"&gt;&lt;br&gt;
        &lt;br&gt;
        &lt;label id="lblBranchesListEditError" class="errorMsg"&gt;&lt;/label&gt;
    &lt;/td&gt;
    &lt;td class="viewEditBranchUrl"&gt;
        &lt;label class="viewBranchUrl detailDisplay"&gt;&lt;a href="http://whub32.webhostinghub.com/~forsyt11/index.php/coverage-area/georgia" class="branchDetailLink" title="Click to go the branch's web page"&gt;georgia&lt;/a&gt;&lt;/label&gt;
        &lt;input type="text" class="edit editBox editUrl hideOnLoad" value="georgia"&gt;
    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>This code hides the labels and shows the textboxes and buttons when that row is clicked on.</p>

<pre><code>$('#tblViewEditAllBranches').on('click', 'tr', function(e) {
    $(this).find('td').each(function() {
        $(this).find('.editBox').val($(this).find('.detailDisplay').text());
    });

    // Hide edit elements in other rows and labels in clicked row
    $('#tblViewEditAllBranches tr').not(this).find('.edit').fadeOut(200);
    $('label', this).fadeOut(200);

    // Show labels in other rows and edit elements in clicked row
    $('#tblViewEditAllBranches tr').not(this).find('label').delay(200).fadeIn(200);
    $('.edit', this).delay(200).fadeIn(200);

    e.stopPropagation();
});
</code></pre>

<p>What's currently happening is, when the link in the last column is clicked on, the row goes into "edit" mode <strong>and</strong> the browser loads the url that was clicked on.</p>

<p>I need to allow the link to work, but when the link - and <em>only</em> the link - is clicked on, the row does <strong>not</strong> go into edit mode, but loads the url.</p>

<p>I've tried the following code to try to accomplish this, but the closest I got was when I used return false, which wasn't really "close" at all, since it didn't follow the url, but the row did go into edit mode. e.preventDefault and e.stopPropagation both don't seem to have any effect.</p>

<pre><code>$('#tblViewEditAllBranches tr').find('label.viewBranchUrl').on('click', 'a.branchDetailLink', function(e) {
    e.preventDefault;
});
</code></pre>
