Reputation: 3188
I have this jQuery code where I have a click event on a <tr>
. This event should not trigger when I click on a specific <td>
. The code that I have now does this just great, but now I want to add one more condition where the event on the <tr>
should not trigger when it's clicked.
I want to add a <span></span>
which, if clicked, does trigger the event on the <tr>
.
Here is my code:
// Change background color on rows in new candidates list
$(".newCandidatesTableTr td:not(#testTD) span:not(#candidateID)").click(function() {
$(this).parent().siblings().removeClass("diffColor");
$(this).parent().toggleClass("diffColor", this.clicked);
});
This doesn't work:
span:not(#candidateID)
How should I do this?
Upvotes: 0
Views: 144
Reputation: 50197
I would probably select the top-most elements that can be clickable, then filter away click events on the more specific elements that should not be clickable.
$('tr.newCandidatesTableTr > td').click(function (e) {
// Get a jQuery-wrapped instance of the clicked element.
var target = $(e.target);
// Filter clicked element (due to bubbling, this is not necessarily the <td>
// element.)
if (target.is('td#testTD') || target.is('span#candidateID')) {
// Pass on event.
return true;
}
// Do stuff...
});
Upvotes: 1
Reputation: 2479
Try this:
// Change background color on rows in new candidates list
$(".newCandidatesTableTr td[id!=testTD] span[id!=candidateID]").click(function() {
$(this).parent().siblings().removeClass("diffColor");
$(this).parent().toggleClass("diffColor", this.clicked);
});
Upvotes: 0