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

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