Question

我有一个通知系统，可以在我的html中的表格中生成所有用户的通知以及一堆这样的行：

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

然后我有一个js脚本，每次运行＆＃34;存档按钮＆＃34;被迫：

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

我的问题是：我如何制作它以便每个按钮只能触发一次事件？每个类都与＆＃34; archive-button＆＃34;相同。因此，当我执行。（＆＃39; clicl＆＃39;）时，它会禁用我尚未点击的所有其他内容。我可以从perl检索notice_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标记。

Answer 2

将您的侦听器附加到实际的表格单元格而不是document：

$( 'td.archive-button' ).one( 'click', function(){
     var notice_id = $(this).data('notice_id');

     // etc....
});

当以这种方式完成时，每个单元格将获得它自己的单击侦听器，从而有效地消除了存储任何当前状态的需要。

点击事件只有在同一个班级时才开火一次

2 个答案: