0

Estoy en la consola del navegador, en la pagina de youtube version mobile, deseo que cada vez que se haga clic a las imagenes de los videos del feed se ejecute una función que haga aparecer un alert.

introducir la descripción de la imagen aquí

Entonces intenten con lo siguiente.

document.querySelector('.large-media-item-thumbnail-container').addEventListener("click", mostrar, false);

funciona bien, pero como se habran dado cuenta solo funciona con el primer elemento y si uso querySelectorAll tendre que especificar que elemento deseo sin embargo como explique antes quiero que se agregue a todos los elementos.

introducir la descripción de la imagen aquí

Pensé que no se podía realizar, sin embargo encontre esto que realiza algo parecido, principalmente lo que deseo que es poder obtener todos los elementos y agregarles un evento.

$(document).ready(function(){
  $('body').on('click', '#items_en_uso span', function(){
    alert($(this).attr('id'))
  })
})

Sin embargo, no lo puedo usar por que usa jquery, necesito que este en javascript, ya que inserto este en en un vistaweb de una app de Android.

Por favor si tiene otra ideas de como lograr eso, compartirlas por favor.

2
  • 1
    ¿Responde esto a tu pregunta? ¿Cómo crear eventos delegados en JavaScript puro?
    – user128299
    Commented el 15 mar. 2021 a las 21:20
  • Hay respuestas muy buenas, sin embargo aun no logro que funcione, supongo por que soy nuevo en JavaScript, he intentado con esto pero nada. document.addEventListener('click',function(e){ if(event.target.tagName.toLowerCase() === 'a'){ alert('okk') } }); La respuesta es justo lo que necesito sin embargo no entiendo por que no funciona. Seguiré intentado
    – Redox
    Commented el 15 mar. 2021 a las 22:00

2 respuestas 2

0

Si ya identificaste el selector css comun, solo debes usar el selector querySelectorAll y para cada video agregar el escuchador de eventos, mas o menos asi:

let videos = document.querySelectorAll('.large-media-item-thumbnail-container');
for(video of videos){
    video.addEventListener('click', mostrar);
}
1
  • Si funciona, pero solo para los videos que se han cargado en ese momento, es decir. Me he percatado que si no se hace scroll youtube crea 5 videos aproximadamente y luego los va creando a medida que se hace el scroll, eso ocasiona que solo funcione en los 5 primero videos, alguna sugerencia para eso
    – Redox
    Commented el 15 mar. 2021 a las 21:39
0

Pude resolverlo usando como base la respuesta de Neyer

function addclik(){
let videos = document.querySelectorAll('.large-media-item-thumbnail-container');
for(video of videos){
    video.addEventListener('click', ident);
}
}

function ident(){
alert('listo')
}

Solo Agregue lo siguiente para que se valla asignando el evento a los nuevo elementos creados.

window.onscroll = function() {
  addclik()
};

Sin embargo no se que pasara por detrás es decir, parece que estoy añadiendo el evento a los elementos que ya lo tiene, y aparte de ello a cada momento nuevamente se estan volviendo a añadir ya que estoy haciendo scroll. Creo que esto muy malo, alguien me podría aconsejar sobre esto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.