Jquery: is there a and selector?

Question

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?

Answer 1

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);
});

Answer 2

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...
});