Question

我在div中有一个元素，它有一个与之关联的click事件。两个点击事件都可以正常工作，除非它们同时触发。

当我点击内部元素以禁用父div的点击事件时：

我的html（在@foreach MVC Razor循环中）：

<td class="tdfuncLangSignOff tdNotChecked tdLang@(item.Language.Name)" title="@(item.SignedOffStatus)">
    <div class="addComment"></div>
    @Html.Hidden("funcSignOffId", item.Id)
</td>

我的jquery：

var handler = function () {
    var thisTD = $(this);
    var signOffId = thisTD.parent().children("input#funcSignOffId").val();
    console.log("parent div click");
}

    $(".tdfuncLangSignOff").click(handler);

$(".addComment").click(function () { 
    $(this).parent().unbind("click")
    console.log("nested div click");
    //$(this).parent().click(handler)
});

我从this thread

找到了处理程序的想法

这允许我点击addComment div并根据需要禁用父div的点击。但重新绑定显然不会发生。当我在addComment单击功能中取消注释$(this).parent().click(handler)时，单击触发器，控制台显示“父div点击”。

如何重新点击父div的点击而不立即触发？

Answer 1

如果我理解你：要停止传播事件，请使用event.stopPropagation（）。

示例：

<div id="a">
    Outer
    <div id="b">Inner</div>
<div>

并在JQuery中：

$("#a").click(function(event) {alert("a");});
$("#b").click(function(event) {alert("b"); event.stopPropagation();});

您可以在这里阅读更多内容： http://api.jquery.com/event.stopPropagation/

Answer 2

您可以尝试：

$(this).parent().bind('click');

Answer 3

我怀疑原因是因为你在子点击事件中重新绑定了点击处理程序，然后事件传播到下一个级别（它的父级），现在又有了点击处理程序。

除非我遗漏了其他内容，否则Naor关于停止传播的建议应该符合您的目的。

取消绑定后，Jquery重新绑定点击

3 个答案: