javascript - 在具有相同类的情况下，单击事件仅触发一次

Question

我有一个通知系统，它将所有用户的通知生成到我的 html 中的一个表中，以及一堆如下所示的行:

<td class = "archive-button" data-notice_id = "<%= $notice->notice_id()%>">Archive</td>

然后我有一个 js 脚本，每次按下“存档按钮”时都会运行:

$(document).on('click', '.archive-button', function(){
    var notice_id = $(this).data('notice_id');
    var archiveaddress = '/user/notices/archivenotice/' + notice_id;
    var archived_notice = 'tr.notification-' + notice_id;

    $.post(archiveaddress, {notice_id: notice_id}).done(function(){
        $(archived_notice).css("background" , "#F2F2F2");
        $('#num-posts').html(parseInt($('#num-posts').html(), 10) -1);
    });
});

我的问题是:如何使每个按钮只能触发事件一次？每个类都与“归档按钮”相同，因此当我执行 .one('clicl') 时，它会禁用所有其他尚未单击的类。我可以从 perl 检索 notification_id 并在生成标签时将其插入到每个标签中，但我仍然无法在 js 脚本中引用它。

Answer 1

只需使用 data 属性，就像您用来存储 notice-id 一样，但现在作为标志:

$(document).on('click', '.archive-button', function() {
    if ($(this).data("clicked") !== true) {
        $(this).data("clicked", true);

        var notice_id = $(this).data('notice_id');
        var archiveaddress = '/user/notices/archivenotice/' + notice_id;
        var archived_notice = 'tr.notification-' + notice_id;

        $.post(archiveaddress, {notice_id: notice_id}).done(function() {
            $(archived_notice).css("background" , "#F2F2F2");
            $('#num-posts').html(parseInt($('#num-posts').html(), 10) -1);
        });
    }
});

注意:您应该使用真实按钮(input或a)而不是td标签作为一个按钮。