0
218
Vistasjs para comunicarse con dom en wordpress
Estoy tratando de escuchar un evento de clic de un enlace usando javascript dentro de un proyecto de wordpress. Pero pude notar que NodeList se está quedando vacío. Parece ser que tiene un problema al comunicarse con el DOM. Mi intento es el siguiente. Creé una carpeta llamada theme y dentro de index.php allí, se agregaron las siguientes líneas.
<?php get_header(); ?> <a href="#" class="btn btn-next width-50 ml-auto">Next1</a> <a href="#" class="btn btn-next width-50 ml-auto">Next2</a> Luego, dentro del archivo functions.php importó el archivo de secuencias de comandos externo como se muestra a continuación.
<?php function pet_data1(){ wp_enqueue_script('pet_adoption_style1', get_stylesheet_directory_uri().'/script.js', array(), false, false); } add_action('wp_enqueue_scripts', 'pet_data1'); ?> A continuación, el archivo header.php se muestra a continuación.
<!DOCTYPE html> <html lang="en"> <head> <?php wp_head();?> </head> </html> Finalmente, el archivo script.js que no recibe el resultado esperado es el siguiente.
const nextBtns = document.querySelectorAll(".btn-next"); console.log("nextBtns",nextBtns) Cuando nodeList la lista de nodos, la longitud es cero. Pero debe haber 2 nodos que contengan la clase btn-next . Así que creo que debería haber un problema con la estructura de wordpress que he seguido. Como soy nuevo en wordpress, necesito su apoyo para solucionar esto.
1 Respuestas
Responde la pregunta0
El problema no es con la "estructura de WordPress", sino porque está cargando el script en <head> , pero intenta acceder a los elementos en el cuerpo del documento antes de esperar a que el DOM esté listo.
Las etiquetas <script> en <head> se descargarán y ejecutarán, antes de que el navegador analice el resto del HTML que se encuentra después de <head> . no existen en el árbol DOM en tiempo de ejecución:
Fuente: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
Hay dos soluciones:
- Asegúrese de que
script.jsesté cargado en el pie de página, lo que significa que el DOM se ha analizado y está listo, o - Envuelva toda la lógica de consulta DOM en
script.jsen una devolución de llamada que se invoca al activarse el eventoDOMContentLoaded:
window.addEventListener('DOMContentLoaded', () => { const nextBtns = document.querySelectorAll(".btn-next"); console.log("nextBtns",nextBtns) });