javascript - jquery解除绑定(bind)后重新绑定(bind)点击

Question

我在 div 中有一个元素，它有一个与其关联的点击事件。两个点击事件都工作正常，只是它们同时触发。

当我单击内部元素以禁用父 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 的单击。但重新绑定(bind)显然不会发生。当我在 addComment 点击函数中取消注释 $(this).parent().click(handler) 时，点击会触发，控制台会显示“parent div click”。

如何重新绑定(bind)父 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/