Estoy tratando de seleccionar la clase de elemento 'eliminar libro' que no se crea hasta que se ejecutan los libros de visualización... ¿cómo hago para seleccionar este botón de eliminación DESPUÉS de que se haya creado? Aquí hay un enlace a github https://github.com/Cluelessshint/library , la función 'displayBooks ()' es lo que crea esa clase ... ¡ayuda por favor!
buttons.forEach((button) => { if (button.className === 'new-book') { button.addEventListener('click', function () { const input = document.querySelector('.book-input'); openInput(input); }); } else if (button.className === 'add-input') { button.addEventListener('click', addABook); } else if (button.className === 'remove-book') { button.addEventListener('click', doThis); } console.table(buttons); });Intente utilizar la delegación de eventos. La idea es simple: en lugar de escuchar eventos en el elemento de destino, escuchar eventos en sus elementos antepasados. Si está ocurriendo un evento, el navegador funciona de la siguiente manera.
- El navegador verifica si el padre directo del elemento seleccionado tiene un controlador de eventos onclick registrado para la fase de propagación y, de ser así, lo ejecuta.
- Luego pasa al siguiente elemento ancestro inmediato y hace lo mismo, luego al siguiente, y así sucesivamente hasta llegar al elemento.
Entonces, cuando se hace clic en el elemento, el evento se expande a su elemento antepasado. No importa cuándo y cómo se crea el elemento.
Refactorizar su código con delegación de eventos sería algo como lo siguiente.
document.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON') { // make sure the target is a button element const button = event.target; // this is the button clicked. const classNames = event.target.classList if (classNames.contains('new-book')) { const input = document.querySelector('.book-input'); openInput(input); } else if (classNames.contains('add-input')) { button.addEventListener('click', addABook); } else if (classNames.contains('remove-book')) { button.addEventListener('click', doThis); } } }) nota: no estoy seguro de por qué agrega otro detector de eventos cuando se hace clic en un botón. Esto es solo un refactor en una perspectiva de event delegation