1

我有一个消息主题表，并且每个 tr 都可单击以导航到消息详细信息页面。但是，还有一个垃圾图标，用户可以单击该图标以通过 $.ajax 将消息标记为删除，这是通过首先将 tr 事件处理程序“关闭”来完成的。问题是，当返回 tr click 事件处理程序时，点击被处理并且用户被导航到详细信息页面。

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

所以我的问题是，如何在关闭 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) {

        // turn off tr click to prevent navigation
        $("#messageTable tbody tr").off("click");

        // 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();
                }
            }
        });

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

2 回答 2

0

由于垃圾桶图标是 的后代tr，因此无需关闭该行上的事件处理程序。只需从您的垃圾图标单击处理程序中调用stopPropagation()（注意拼写，也许这就是它不适合您的原因？）。

$("#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(). closest找到最接近的匹配祖先。

于 2012-05-14T12:04:17.420 回答
0

我假设您.icon-trash在 s 中有元素#messageTable tbody tr，您可能想要做的是阻止它们冒泡并忘记off("click")调用：

$("#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;
});

发生的事情是，点击是在按钮上处理的，冒泡了，它也在tr元素上处理。e.stopPropagation();和语句阻止了这种return false;情况的发生，它不会冒泡。offand调用并没有改变这种on行为，因为它们实际上并没有停止冒泡（冒泡在此函数返回后开始）。

于 2012-05-14T12:11:50.480 回答