1

我有一张桌子，我在 tr 上有一个点击事件：

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

，这个点击事件：

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

工作得很好，但在这一行中，我在 td 上也有一个点击事件：

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

这相互冲突。如果单击 tr，我想做一件事，而当单击 tr 中的特定 td 时，我想做另一件事。那么我如何在我的 tr.click() 事件中定义当我单击特定 td 时该事件不会发生？

这是代码：

// 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>
             <%
        } %>
4

4 回答 4

4

您应该能够通过在单击处理程序中执行来阻止单击tr处理程序被调用。如果没有，请尝试。e.stopPropagation()tde.stopImmediatePropagation()

于 2009-08-28T11:16:24.390 回答
3

在你的情况下

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

会为你做的。

你可以在这里看到一个工作演示

于 2009-08-28T11:19:19.393 回答
1

在您的 td 点击事件中，您可以使用stopPropagation(); 这将确保在该事件完成后不再触发点击事件。

编辑：如果您使用的是 IE，您可能想尝试window.event.cancelBubble = true;

另外，我的意思是在完成后不再触发任何事件，我的意思是在之后不会触发更多事件stopPropagation()，如果您将其放在 td click 事件中，则不应触发 tr click 事件......

于 2009-08-28T11:17:13.670 回答
1

这里有几个关于 using 的答案stopPropagation，这是该问题的直接答案。

不过，我想知道，如果退后一步可能会有所帮助：请记住单击事件冒泡（实际上，这就是您遇到的问题），所以我想知道您是否不想在行或单元格上挂钩单击事件根本没有，而是放在桌子上。（这有时称为事件委托。）在表的click处理程序中，您可以找出实际单击的元素（行、单元格等）。我不知道这样做的 jQuery 语法，但 Prototype 提供Event#findElement了这个目的，我确信 jQuery 有类似的东西；target如果没有，从事件的属性开始并使用 jQuery 强大的 DOM 遍历工具来编写它很容易。

拥有一个处理程序而不是几十个或数百个处理程序更节省内存，并且通常也更易于编码。

于 2009-08-28T11:35:37.487 回答