Jquery: How do i not select a specific column

Question

I have a table, where i have a click event on the tr:

<tr id="<%= candidate.AnsogerID %>" class="newCandidatesTableTr">

, this click event:

$(".newCandidatesTableTr").click(function(e) {

works just fine, but in the row i also have a click event on a td:

$(".insertCandidate").live("click", (function(e) {

and this conflicts eachother. I want to do one thing if the tr is clicked and other when this specific td in the tr is clicked. So how do i in my tr.click() event defined that the event shall not happend when i click the specific td?

Here is the code:

// Lists a table with old candidates who migth be the same person as the new candidate
        $(".newCandidatesTableTr").click(function(e) {
            alert(this.id);
            GetCandidateName(this.id);
        });

// Show insert candidate dialog
        $(".insertCandidate").live("click", (function(e) {
            var tempCanName = $(".suggentionCandidatesTableTitle").text();
            var tempCanNameSub = tempCanName.substr(0, tempCanName.length - 1);
            var canName = $(".suggentionCandidateName_" + canID + "").text();
            $("#mergeCandidateDialog").empty();
            $.blockUI({ message: $("#mergeCandidateDialog").append(
                "<div>" + tempCanNameSub + "'s ansøgning vil blive lagt under den eksiterende ansøger " + canName + "'s data.<br /><br /> Ønsker du at fortsætte?<br /><br /></div>" +
                "<div id=\"content\">" +
                "<input type=\"button\" id=\"" + this.id + "\" class=\"insertCandidateYes\" value=\"Ja\" />" +
                "<input type=\"button\" id=\"insertCandidateNo\" value=\"Nej\" /></div>"), css: { cursor: 'default', fontWeight: 'normal', padding: '7px', textAlign: 'left' }
            });
        }));

<% foreach (var candidate in Model.Ansogninger)
        {
             %>
                <tr id="<%= candidate.AnsogerID %>" class="newCandidatesTableTr">
                    <td><div id="candidateID""><label title="<%= candidate.Navn %>"><%= candidate.AnsogerID %></label></div></td>
                    <td><div id="<%= "candidateName_" + candidate.AnsogerID %>" class="candidateNameTD"><%= candidate.Navn %></div></td>
                    <td><div id="candidateEmail"><%= candidate.Email %></div></td>
                    <td><div id="candidateRundeName"><%= Model.RundeName %></div></td>
                    <td id="testTD">
                        <div id="<%= "acceptCandidateButton_" + candidate.AnsogerID %>" class="acceptb">Godkend</div>
                    </td>
                </tr>
             <%
        } %>

Answer 1

You should be able to stop the tr click handler from being called by doing e.stopPropagation() in the td click handler. If it doesn't, try e.stopImmediatePropagation().

Answer 2

in your td click event you could use stopPropagation(); This will make sure no more click events is fired after that one is finished.

Edit: If you're using IE, you might wanna try window.event.cancelBubble = true;

Also, what I meant by no more events are fired after it is finished, I meant that no more events will be fired after stopPropagation(), and if you placed that inside the td click event, the tr click event shouldn't be fired...

Answer 3

In your case

$(".insertCandidate").live("click", (function(e) {
    // do td stuff here
    e.stopPropagation(); // stop propagating event
});

will do that for you.

You can see a working demo here

Answer 4

Several answers here about using stopPropagation, which is the direct answer to the question.

I wonder, though, if stepping back a bit might help: Remember that click events bubble (in fact, that's what you're running into), and so I wonder if you may want to not hook the click event on the row or cell at all, but instead on the table. (This is sometimes called event delegation.) In the table's click handler, you can find out what element was actually clicked (row, cell, etc.). I don't know the jQuery syntax for doing that, but Prototype provides Event#findElement for this purpose and I'm sure that jQuery has something similar; if not, it's easy enough to write it up starting from the event's target property and using jQuery's powerful DOM traversing tools.

Having one handler rather than dozens or hundreds is more memory-efficient, and frequently simpler to code as well.