Datatable 正在阻止除第 1 页之外的其他页面上的按钮单击事件

Question

我有一个包含我网站中所有类别的数据表。有一个功能可以删除 AJAX 的类别，同时选择一个类别以将产品（在我的例子中是网站）移动到另一个类别。以下是我的做法：

$(".delete_category_instant").on('click', function(event) {
        $(this).hide();
        $(this).closest("td").find(".editCategory").hide();
        $(this).closest("td").find(".selectCategoryToMove").removeClass("d-none");
      });

      $(".selectCategoryToMove").find(".submitSelection").on('click', function(event){
        $(this).closest("td").find(".selectCategoryToMove").addClass("d-none");
        $(this).closest("td").find(".confirmAction").removeClass("d-none");
        Toast.fire({
          icon: 'warning',
          title: 'Please confirm your action!'
        });
      });

      $(".confirmActionYes").on('click', function(event) {
        var cat_id = $(this).attr('category-id');
        var move_cat_id = $(this).closest("td").find("select").val();
        $this = $(this);
        $.ajax({
            type: 'GET',
            url: '{{ url("administrator/delete/category/") }}',
            data: {
              id: cat_id,
              move_id: move_cat_id
            },
            success: function(response) {
                if(response.status == 1) {
                    Toast.fire({
                      icon: 'success',
                      title: 'Category deleted successfully!'
                    });
                    $this.parents('tr').remove();
                } else if(response.status == 2) {
                  Toast.fire({
                      icon: 'warning',
                      title: 'You are not allowed to do this action!'
                    });
                } else {
                    Toast.fire({
                      icon: 'error',
                      title: 'Could not delete this category!<br/>Please try again later!'
                    });
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(xhr.status);
                console.log(thrownError);
            }
        });
      });

      $(".confirmActionNo").on('click', function(event) {
        $(this).parent().addClass("d-none");
        $(this).parent().closest("td").find(".delete_category_instant").show();
        $(this).parent().closest("td").find(".editCategory").show();
      });

但这仅适用于数据表中的第 1 页。在其他页面内，该按钮甚至在点击时没有响应。解决办法是什么？这是我以后需要注意的常见问题吗？

Answer 1

您的事件处理程序可能没有连接到新元素，因为设置它们的代码仅在页面加载时运行一次。无法从您的示例中看出，但如果是这种情况，您可以改用委托的侦听器：

例如：

$(".confirmActionYes").on('click', function() {...})

变成

$(document).on('click', '.confirmActionYes', function () {...})

Datatable 正在阻止除第 1 页之外的其他页面上的按钮单击事件

Datatable is blocking events for button click on other pages except page 1

javascript

jquery

datatables