Hola, estoy creando esta función de carga de imágenes, pero estoy atascado con la lógica de crear una función para los botones de llamada a la acción agregados dinámicamente . Así que tengo esta imagen de carga de arrastrar y soltar, y cuando suelta la imagen en el área de colocación, automáticamente mostrará una vista previa de la imagen y esa imagen de vista previa tiene un botón debajo, un botón Eliminar
const previewImage = function(file) { let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { let div = document.createElement('div'); div.className = 'preview-image-result'; div.innerHTML = ` <img src="${reader.result}"> <div class="d-flex justify-content-center"> <span class="remove-image-button" onclick="removeImage()">Remove Image</span> </div> `; } document.getElementById('preview-image-container').prepend(div); } Intenté agregar un onclick=removeImage() en <span> pero devuelve un error y dice (index):1 Uncaught ReferenceError: removeImage is not defined . Supongo que dado que <span>Remove Image</span> se agrega dinámicamente al sitio no está detectando el método removeImage() que creé. ¿Alguien puede ayudarme sobre qué método usar en este tipo de flujo de trabajo o me estoy perdiendo algo? usando Vainilla Javascript
const removeImage = function() { // remove image }Un detector de eventos en el documento hará:
document.addEventListener("click", function(event){ if(event.target.classList.contains("remove-image-button"){ event.target.closest(".preview-image-result").remove(); } }) Por lo tanto, si se hace clic en el documento y el elemento en el que se hizo clic tiene la clase remove-image-button , se eliminará su padre preview-image-result .
Agregar un detector de eventos al documento y verificar la condición específica del elemento en el que se hizo clic también se denomina delegación de eventos .
Ya veo, gracias por señalarlo en los comentarios. removeImage() se coloca dentro de jQuery(document).ready(function () { }) Cambio la ubicación de removeImage() fuera de jQuery(document).ready(function () {}) y funciona !
const removeImage = function() { // remove image } jQuery(document).ready(function () { const previewImage = function(file) { let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { let div = document.createElement('div'); div.className = 'preview-image-result'; div.innerHTML = ` <img src="${reader.result}"> <div class="d-flex justify-content-center"> <span class="remove-image-button" onclick="removeImage()">Remove Image</span> </div> `; } document.getElementById('preview-image-container').prepend(div); } })No puedo decir si la parte dinámica del código OP realmente funciona, por lo que en el ejemplo a continuación, el img se agregó dinámicamente. El controlador de eventos removeImg(e) se ha vinculado a un elemento ancestral <section> . A través de la delegación de eventos, se puede controlar cualquier botón de cualquier cantidad siempre que esté dentro de la <section> . El controlador de eventos ha sido diseñado solo para reaccionar a cualquier clic en .btn y nada más.
const sec = document.querySelector('section'); const previewImage = () => { let img = ` <figure class="d-flex justify-content-center"> <img src="https://i.ibb.co/hZj77BZ/lena01.jpg" width='150'><figcaption><button class="btn">Remove Image</button></figcaption></figure> `; sec.insertAdjacentHTML('afterBegin', img); } previewImage(); const removeImg = e => { const btn = e.target; if (btn.matches('.btn')) { let imgFrame = btn.closest('figure'); imgFrame.remove(); } }; sec.onclick = removeImg; <section></section>