如何防止单击事件在使用jQuery将其重新“打开”时触发？

我有一个邮件主题表，我已经使每个tr都可以点击导航到邮件详细信息页面。但是，还有一个垃圾箱图标，用户可以通过$.ajax单击该图标来标记要删除的消息，这是通过首先关闭tr事件处理程序来完成的。问题在于，当将tr click事件处理程序重新打开时，将处理click，并将用户导航到details页面

我试图添加e.stopPropogation；在$.ajax调用之后和tr的on设置之前，但这会阻止事件被打开。在之后添加它不会阻止所需的行为

所以我的问题是，在关闭tr之后，如何为tr重新打开click事件，而不是在过程中关闭事件

代码：

---

由于垃圾箱图标是tr的后代，因此无需关闭行上的事件处理程序。简单地说就是拼写，也许这就是为什么它不适合你？从垃圾箱图标单击处理程序

$("#messageTable tbody tr").on("click", function () {
    var id = $(this).find('td:first').find('input').val();
    window.location.replace('/Messages/Read/'+id);
});

$('.icon-trash').on("click", function (e) {

    // prevent the click reaching the row
    e.stopPropagation();

    // grab the message Id from the hidden input
    var messageId = $(this).parent().find('input').val();
    var tr = $(this).parent().parent();

    var request = $.ajax({
        url: "MarkMessageForDeletion"
        , type: "GET"
        , data: { id: messageId }
        , dataType: "json"
        , async: true
        , success: function (data) {
            if (data === "1") {
                tr.remove();
            }
        }
    });
});

值得一提的是，您可以通过使用var tr=$this.closest'tr'使代码更加健壮；而不是.parent.parent。查找最接近的匹配祖先。

我假设您在messageTable tbody trs中有.icon垃圾桶元素，您可能要做的是阻止它们冒泡并忘记offclick调用：

---

所发生的事情是，点击在按钮上被处理，冒出气泡，它也在tr元素上被处理。e.stopPropagation；返回值为假；声明阻止了这种情况的发生，它不会冒泡。off和on调用没有改变此行为，因为它们实际上没有停止冒泡，冒泡在返回此函数后开始。

是否尝试添加“return false；”？return false的作用不仅仅是停止播放，它还可以防止默认播放。在这种情况下可能不重要。但是，如果您调用了StopRoPagation，则返回false没有任何意义，除非您还想防止默认值。这是我很久以前的一个老习惯，但感谢您澄清这一点，我忘记了。感谢您的回答和关于最近的提示。@user1194094:不用担心，很高兴这有所帮助。另一件你可能会觉得方便的事情是事件委派。请注意，我可以添加一行，而不必做任何事情来连接处理程序，因为它们实际上连接在tbody上，而不是单个tr或.icon垃圾元素上。最好的，谈谈如何超越，感谢您的示例，它将帮助我将代码从功能性转换为最佳。

$("#messageTable tbody tr").on("click", function () {
    var id = $(this).find('td:first').find('input').val();
    window.location.replace('/Messages/Read/'+id);
});

$('.icon-trash').on("click", function (e) {

    // prevent the click reaching the row
    e.stopPropagation();

    // grab the message Id from the hidden input
    var messageId = $(this).parent().find('input').val();
    var tr = $(this).parent().parent();

    var request = $.ajax({
        url: "MarkMessageForDeletion"
        , type: "GET"
        , data: { id: messageId }
        , dataType: "json"
        , async: true
        , success: function (data) {
            if (data === "1") {
                tr.remove();
            }
        }
    });
});

$("#messageTable tbody tr").on("click", function () {
    var id = $(this).find('td:first').find('input').val();
    window.location.replace('/Messages/Read/'+id);
});

$('.icon-trash').on("click", function (e) {
    e.stopPropagation(); 

    // grab the message Id from the hidden input
    var messageId = $(this).parent().find('input').val();
    var tr = $(this).parent().parent();

    var request = $.ajax({
        url: "MarkMessageForDeletion"
        , type: "GET"
        , data: { id: messageId }
        , dataType: "json"
        , async: true
        , success: function (data) {
            if (data === "1") {
                tr.remove();
            }
        }
    });

    // I also like to return false from the handler,
    // which is an old-school way of e.stopPropagation()
    return false;
});