2

pues lo dicho en la pregunta. Si tengo un elemento que aún no existe porque es dinámico y se crea por ejemplo al hacer click en un botón ¿Cómo puedo añadirle un evento a ese elemento dinámico si no existe?. Me gustaría usar solo JavaScript. Por ejemplo:

//Este elemento con la clase=element se creará al pulsar un botón.
document.querySelector('.element').addEventListener('click',()=>{
    //Cuerpo de la función
});

Este código por ejemplo no funciona porque el navegador me dice que no existe ese elemento. ¿Cómo podría hacerse de una forma parecida? Supongamos que no tengo acceso al botón, es decir yo no puedo añadir el evento a este elemento una vez que pulse el botón. Aclaro un par de cosas, lo que quiero hacer es lo mismo que hacemos en Jquery, con:

$('.editable-open').on('click', function(){
    alert("Hola");
});

Pero necesito usar JavaScript.

Muchas gracias.

2
  • El usuario hace click -> creas el elemento -> añades el EventListener Commented el 25 oct. 2018 a las 7:52
  • Podrías añadirle el evento inmediatamente después de crearlo, en la misma función del primer click.
    – Rabegi
    Commented el 25 oct. 2018 a las 7:55

2 respuestas 2

1

Esto que muestras usando jQuery:

$('.editable-open').on('click', function(){ 
    //esta función solo se ejecutará si el elemento existía cuando se añadió el evento
    alert("Hola");
});

Para que te funcionase con jQuery deberías hacer lo siguiente:

$(document).on('click','.editable-open', function(){ //esta función se ejecutará en todos los casos
    alert("Hola");
});

Ahora bien, como has dicho que quieres hacerlo tu, "de manera casera" sin el uso de terceros, podrías hacer lo siguiente:

/* Esta función añade un evento dinámico al documento
* @param {String} evt - Nombre del evento
* @param {String} q - El selector query
* @param {Function} fn - Función que se ejecutará cuando se dispare el evento
*/

document.attachEvent = function( evt, q, fn ) {
		
   document.addEventListener( evt, ( e ) => {
   	if (e.target.matches( q ) ) {
    	fn.apply( e.target, [e] );
    }
   });
  
};

document.attachEvent('click','.a', function() {
  console.log(this.innerHTML+" dice: Auch!");
});

document.attachEvent('mousemove','.b', function() {
	console.log(this.innerHTML+' dice: Te mueves sobre mi');
});
<button class="a">clase a</button>
<button class="a">clase a</button>
<button class="b">clase b</button>
<button class="b">clase b</button>

1

Utilizas el nombre de la variable para el nuevo elemento para añadir un evento-

let nuevoElemento = document.createElement("div");
contenedor.appendChild(nuevoElemento);
nuevoElemento.addEventListener("click", () => {
  nuevoElemento.style.background = "red";
});
div {
  border: 1px solid;
  min-height: 100px;
  padding: 2em;
}
<div id="contenedor"></div>

2
  • Eso es prácticamente lo que he explicado que no puedo hacer. Quiero hacer lo que hace esta función en jquery: $('.claseElemento').on('click', function(){........});
    – kosode
    Commented el 25 oct. 2018 a las 10:01
  • Creo que no has entendido. No utilizas '.claseElemento'. Utilizas una variable que guarda una referencia al elemento creado.
    – enxaneta
    Commented el 25 oct. 2018 a las 10:31

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