CODEWITHSUNDEEP
jquery
marky
marky

Reputation: 5068

How to prevent .on('click') function working for a link in a table row

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 not cause the row to got into "edit" mode, but only when the link itself is clicked.

Here's the code for a row:

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

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

$('#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();
});

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

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

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.

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

Upvotes: 2

Views: 1788

Answers (3)

Code-Source
Code-Source

Reputation: 2243

You should wrap you function in a condition that check if closest clicked element is the link.

Try this code:

$('#tblViewEditAllBranches').on('click', 'tr', function(e) {
    if($(e.target).closest('a.branchDetailLink').length == 0){
        $(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();
    }
});

http://jsfiddle.net/78d4z/

Upvotes: 3

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

If understand correctly, it's a question of how the event handler is attached.

Something like this should exclude the unwanted event handling :

$('#tblViewEditAllBranches').on('focus', 'label', function(e) {
    // ...
    //your existing code here
    // ...
});

You may need to play around with this a bit - it depends on exactly what you want.

You could, for example, attach the handler to every cell except the last one in each row.

Upvotes: 0

bevacqua
bevacqua

Reputation: 48496

either do

return false;

or

e.stopPropagation();

console.log might come in handy for debugging this

event.stopPropagation prevents the event from bubbling from the anchor that was clicked to it's parents, such as the table row.

Upvotes: 0

Related Questions