Tengo una tabla de datos con todas las categorías en mi sitio web. Hay una función para eliminar una categoría con AJAX al seleccionar una categoría para mover los productos (sitios web en mi caso) a otra categoría. Así es como lo hago:

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

Pero eso funciona solo en la página 1 en la tabla de datos. Dentro de otras páginas, el botón ni siquiera responde al hacer clic. ¿Cuál es la solución de eso? ¿Es ese un problema común que debo tener en cuenta en el futuro?