Question

我有一张桌子，我在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>
             <%
        } %>

Answer 1

您应该可以通过在tr点击处理程序中执行e.stopPropagation()来停止调用td点击处理程序。如果没有，请尝试e.stopImmediatePropagation()。

Answer 2

在你的情况下

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

会为你做到这一点。

您可以看到有效的演示here

Answer 3

在您的td点击事件中

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

修改：如果您使用的是IE，可能需要尝试window.event.cancelBubble = true;

此外，我的意思是没有更多事件在完成后被触发，我的意思是在stopPropagation()之后不会再触发事件，如果你把它放在td click事件中，那么tr click事件不应该被解雇......

Answer 4

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

我想知道，如果退一步可能会有所帮助：请记住点击事件泡沫（事实上，这就是你遇到的事情），所以我想知道你是否想要不将click事件挂钩在行或单元格上，而不是挂在表上。（这有时称为事件委托。）在表的click处理程序中，您可以找到实际单击的元素（行，单元格等）。我不知道用于执行此操作的jQuery语法，但Prototype为此提供了Event#findElement，并且我确信jQuery具有类似的功能;如果没有，从事件的target属性开始并使用jQuery强大的DOM遍历工具就可以很容易地编写它。

拥有一个处理程序而不是几十个或几百个，这样可以提高内存效率，而且编码通常也更简单。

Jquery：我怎么不选择特定的列

4 个答案: