es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El selector de clase de jQuery no funciona después de la actualización a .NET 5.

06 Jun, 2023 Programación

Estoy trabajando en una actualización de .NET5 y mientras actualizo el código, me di cuenta de que mi selector de jQuery para las clases no está funcionando. Es un proyecto MVC con páginas Razor.

En mi vista, tengo mi script en la parte superior y llamo a los elementos del menú con etiquetas de anclaje:

<script src="~/menu.js" type="text/javascript"></script>
<a href="#" class="menu-pop create_new_project" data-position="right" data-content="New Project" id="new-project">
   <i class="fa fa-edit"></i>
   <span>New Project</span>
</a>

Luego, en mi archivo menu.js se llama así:

$('.create_new_project').on('click', function (e) { ...hacer algo });

Actualización
Acabo de descubrir que si redirijo a otra página, se activa. Puedo confirmar que el script está presente cuando se ve el menú. Además, no hay errores en la consola del desarrollador. Realmente no estoy seguro de lo que estoy haciendo mal.

Intenté usar el ID en lugar de la clase y agregar selectores:

$('#new-project').on('click', function (e) { ...hacer algo });
$('#new-project').on('click', 'a', function (e) { ...hacer algo });

El problema persistió.

Está cargado en el DOM.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en TI especializado en jQuery y ASP.NET5, hay algunas cosas que podemos investigar para resolver el problema del selector de jQuery que no funciona en el proyecto MVC con Razor Pages:

    1. Confirmar que la biblioteca de jQuery se carga correctamente antes del archivo menu.js. Podemos hacer esto comprobando la pestaña de red en la consola del desarrollador del navegador y ver si ambos archivos se cargan sin errores.

    2. Verificar si hay conflictos con otras bibliotecas o scripts de JavaScript en la página. Esto se puede hacer eliminando temporalmente todos los demás scripts y probando si el selector de jQuery funciona como se espera.

    3. Verificar que la sintaxis del selector sea correcta. En el código dado, el selector es $('.create_new_project'). Sin embargo, en el código HTML, podemos ver que el nombre de la clase es create_new_project y no create_new_project. Podemos intentar cambiar el selector de jQuery a $('.create_new_project') y ver si funciona.

    4. Comprobar si hay eventos que puedan evitar que se dispare el evento de clic en la etiqueta del ancla. Por ejemplo, si hay otro script que enlaza un evento de clic al mismo elemento, podría interferir con el selector de jQuery. En este caso, podemos intentar desenlazar cualquier evento de clic existente antes de enlazar nuestro propio evento de la siguiente manera:

    $('.create_new_project').off('click').on('click', function(e){ ... hacer cosas});
    1. Finalmente, si ninguna de las soluciones anteriores funciona, podemos intentar usar el método on() de jQuery para delegar el evento a un elemento padre. Esto es útil al agregar o eliminar elementos dinámicamente en la página. Por ejemplo:
    $(document).on('click', '.create_new_project', function(e){ ... hacer cosas});

    Aquí, en lugar de enlazar el evento de clic directamente a la etiqueta del ancla, lo enlazamos al elemento de documento y lo delegamos a cualquier elemento con la clase create_new_project que exista o se agregue a la página más tarde.

    Al probar estos pasos de depuración, deberíamos poder identificar y resolver el problema con el selector de jQuery que no funciona en la actualización .NET5.

Comments are closed.