1

メッセージの件名の表があり、各 tr をクリックしてメッセージの詳細ページに移動できるようにしました。ただし、ユーザーがクリックして $.ajax を介して削除するメッセージをマークできるゴミ箱アイコンもあります。これは、最初に tr イベント ハンドラーを「オフ」にすることによって行われます。問題は、tr クリック イベント ハンドラーを元に戻すと、クリックが処理され、ユーザーが詳細ページに移動することです。

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

.icon-trashs内に要素があると仮定します。#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;の呼び出しは、実際にはバブリングを停止しなかったため、この動作を変更しませんでした (バブリングは、この関数の戻り後に開始されます)。offon

于 2012-05-14T12:11:50.480 に答える
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 に答える