Tengo este código que publica contenido HTML dentro de #reviewsList div en la carga de la página.
<script> $(document).ready(function() { function showReviews(page = 1) { $.get(URL).done(function (reviews) { $("#reviewsList").html(reviews.html).ready(function() { // DECLARING SOME JS FUNCTIONS THAT ARE USED INSIDE THE LOADED FILE }); }); } }); </script> Pero el problema es que tengo una paginación que funciona con el evento onclick en línea - showReviews(page)
Ejemplo:
<span onclick="showReviews(3)"></span>
⬆ esto está dentro del archivo cargado de AJAX
showReviews() se declara en el archivo principal, pero también se usa dentro del archivo cargado y obtengo que showReviews() is not a function dentro de la consola del navegador cuando se hace clic en un intervalo de página de paginación.
¿Cómo puedo permitir que showReviews() se pueda usar en el archivo cargado con AJAX en este caso?
Traté de declarar la misma función dentro del
$("#reviewsList").html(reviews.html).ready(function() { });pero sin éxito.
El problema es que la función showReviews() se declara dentro del controlador document.ready, por lo que está fuera del alcance de un atributo onclick en línea, que requiere que las funciones se declaren en el alcance global.
La solución rápida al problema es mover la declaración de la función showReviews() fuera de document.ready.
La mejor solución es eliminar la dependencia del atributo de evento en línea y vincular los controladores de eventos en JS. El código para eso implicaría cambiar el HTML que recibe en la solicitud AJAX a algo como esto:
<span data-review-page="3"></span>Luego, usando un controlador de eventos delegado en el JS:
jQuery($ => { function showReviews(page = 1) { $.get(URL).done(function(reviews) { $("#reviewsList").html(reviews.html); }); } showReviews(); // on page load $('#reviewsList').on('click', 'span', e => { let page = $(e.target).data('review-page'); showReviewS(page); // when a span is clicked }); }); También tenga en cuenta que el evento ready() es redundante en cualquier cosa excepto en el elemento del document . Se puede eliminar de #reviewsList . Allí indica que lo usa para declarar algunas funciones basadas en el nuevo contenido; nuevamente, use controladores de eventos delegados para eso, sin repetir las mismas definiciones de función.