CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Fetchez la vache
Fetchez la vache

Reputation: 5230

jQuery table row selector except MVC actionlinks

I have an html table with... ... some jquery code bound to the table row click 

$(document).ready(function () {
    var tr = $('#RolesTable').find('tbody>tr');
    tr.bind('click', function (e) {
        code fired on table row click..
    }
}

...and some action links in the table for edit and delete functions

<td class="TablePadding">
  @Html.ActionLink(" ", "Edit", new { id = item.RoleID }, new { @class = "editImg" }) 
  @Html.ActionLink(" ", "Delete", new { id = item.RoleID }, new { @class = "deleteImg" })
</td>

How can I get the jquery not to fire when one of the html action links/ images are clicked?

I've tried using the not() method sbut can't get it to work. e.g. amended jquery..

var tr = $('#RolesTable').find('tbody>tr').not("a.editImg").not("a.deleteImg");

Upvotes: 0

Views: 747

Answers (1)

Ram
Ram

Reputation: 144699

You can use target property of the event object. If one of the anchors is clicked, using return, rest of the handler is not executed. 

$(document).ready(function () {
    var tr = $('#RolesTable tbody > tr');
    tr.bind('click', function (e) {
        var $target = $(e.target);
        if ($target.is('a.editImg') || $target.is('a.deleteImg')) {
          return;
        } else {
          // code fired on table row click..
        }
    })
})

Upvotes: 1

Related Questions