对数据表进行排序后，jQuery 按钮不起作用

Question

我有一个 jQuery 函数，它看起来像这样：

function unlock_reservation_columns(resid) {

    $('.unlock-columns').click( function(event) {

        event.preventDefault();
        $(this).closest('tr').find('.columns-locked').removeClass('columns-locked');
        $(this).html('<i class="fa fa-lock"></i> Lock Columns');
        $(this).attr('class', 'lock-columns');

        new PNotify({
            title: 'We have unlocked this reservation..',
            text: 'Reservation Unlocked',
            type: 'success'
        });
        var url = $(this).attr("href");
        var url_id = url.replace(/[^0-9]/g, '')
        $.get(url, function (data) {

            var confirm_changes = confirm('Do you wish to edit unlocked information?');

            if (confirm_changes) {
                window.location.href = '/reservations/database/edit/' + url_id;
            }
            else {
                location.reload()
                return false;
            }
        });
    });
});

<a class="unlock-columns" href="<?php echo $row->unlock_url; ?>"><i class="fa fa-unlock"></i> Unlock Columns</a>

“unlock-columns”按钮位于 Datatable 自定义列内。现在，当页面仅初始化时，此按钮工作正常。在我对表格中的东西进行排序之后。(data-order-by) 并单击按钮它不起作用.. 就像排序后它停止工作一样。任何想法为什么？

Answer 1

使用委托的事件处理程序

$('#tableId').on('click', '.unlock-columns', function(event) {

反而。现在，您只在初始化时将点击处理程序附加到可见行，而不是稍后注入的行（如分页、排序等）。