Quiero obtener el valor del src de <img> cuando se hace clic en cada div principal. ¿Cómo puedo obtener el valor de cada div principal> elemento secundario?
const mybtn = document.getElementById('maybe'); const parent = document.getElementById('parent'); mybtn.addEventListener('click', function(e) { parent.innerHTML = ` <div id="main"> <div id="one" class="one"><img src="https://www.w3schools.com/html/pic_trulli.jpg"</div> <div id="one" class="one"><img src="https://www.w3schools.com/html/img_girl.jpg"</div> <div id="one" class="one"><img src="https://www.w3schools.com/html/img_chania.jpg"</div> </div> `; }); parent.addEventListener('click', (e) => { if (e.target.closest('#main .one')) { //Close Button alert('dis'); } }); <div id="parent"></div> <button id="maybe">Set</button>No hay necesidad de preocuparse por las divisiones principales. Use su oyente existente pero verifique que el elemento en el que se hizo clic matches un elemento de imagen y luego registre su src .
Nota: los identificadores deben ser únicos. No más de uno en una página.
const mybtn = document.getElementById('maybe'); const parent = document.getElementById('parent'); mybtn.addEventListener('click', function(e) { parent.innerHTML = ` <div id="main"> <div class="one"><img src="https://www.w3schools.com/html/pic_trulli.jpg" /></div> <div class="one"><img src="https://www.w3schools.com/html/img_girl.jpg" /></div> <div class="one"><img src="https://www.w3schools.com/html/img_chania.jpg" /></div> </div>`; }); parent.addEventListener('click', (e) => { if (e.target.matches('img')) { console.log(e.target.src); } }); img { width: 100px; } .one { padding: 2em; background-color: #efefef; margin: 0.5em; width: 150px; } <div id="parent"></div> <button id="maybe">Set</button>Editar: siguiendo tu comentario.
En lugar de tener un oyente, deberá agregar oyentes a cada div con one clase después de haber agregado el HTML a la página.
const mybtn = document.getElementById('maybe'); const parent = document.getElementById('parent'); mybtn.addEventListener('click', function(e) { parent.innerHTML = ` <div id="main"> <div class="one"><img src="https://www.w3schools.com/html/pic_trulli.jpg" /></div> <div class="one"><img src="https://www.w3schools.com/html/img_girl.jpg" /></div> <div class="one"><img src="https://www.w3schools.com/html/img_chania.jpg" /></div> </div>`; const ones = document.querySelectorAll('.one'); ones.forEach(one => { one.addEventListener('click', handleClick, false); }); }); function handleClick(e) { if (e.target.matches('.one')) { const img = e.target.querySelector('img'); console.log(img.src); } } img { width: 100px; } .one { padding: 2em; background-color: #efefef; margin: 0.5em; width: 150px; } .one:hover { background-color: #dfdfdf; } <div id="parent"></div> <button id="maybe">Set</button>