数据表阻止除第 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 () {...})