[SOLUCIONADO] evento on click no hace nada :(

Rider_Gotha · #1 (**permalink**) 25/11/2015, 16:49

Muy buenas, soy nuevo en el foro, y este es mi primer post.. ¡Hola a todos! y gracias de antemano

Al tema. Estoy estudiando jQuery, y me he encontrado con el mismo problema en un par de ejercicios, y no encuentro la solución.

El problema es que pulsando un button creo varios div, dentro de otro div contenedor. hasta ahí perfecto, luego asigno un evento on click sobre los diferentes divs que creé dentro de este div contenedor de esta manera --> $('#contenedor div'), y no hace absolutamente nada.

Esto es una simplificación del programa.

Código:

	$(document).ready(function () {
	    $('button').on({
	        click: function () {
	            for (var i = 0; i < 20; i++) {
	                var nuevaCapa = $('<div></div>');
	                nuevaCapa.addClass('capa').attr('id', 'capa' + i);
	                $('#content').append(nuevaCapa);
	            }
	        }
	    });
	    $('#content div').on({
	        click: function () {
	            $(this).remove();
	        }
	    });
	});

Código HTML:

<body>
      <button id="comenzar">Comenzar</button>
      <div id="content"></div>
</body>

Muchas gracias a todos de antemano.

Alexis88 · #2 (**permalink**) 25/11/2015, 17:27

Bienvenido a Foros del Web.

No funciona porque dicha instrucción cargó antes de que lo hagan los elementos que añadiste. La solución está en delegar el evento al elemento que contiene a los elementos añadidos.

Código Javascript:

Ver original$("#contenedor").on("click", "div", function(){
    //$(this) representará a cada <div> pulsado que se encuentre dentro del contenedor
});

Un saludo

siddartha23 · #3 (**permalink**) 25/11/2015, 21:38

¿No es un error de sintaxis?

Código Javascript:

Ver original// en vez de ...
$('button').on({
               click : function(){...}
} 
// escribe ... 
 $('button').on('click', function(){...});

Alexis88 · #4 (**permalink**) 25/11/2015, 21:50

Cita:

Iniciado por siddartha23

¿No es un error de sintaxis?

No lo es. De esa manera, puedes registrar varios eventos a la selección realizada.

Código Javascript:

Ver original$("selector").on({
    evento1: function(){
        //Instrucciones
    },
    evento2: function(){
        //Instrucciones
    },
    eventoN: function(){
        //Instrucciones
    }
});

Fíjate en el penúltimo ejemplo grande: Método .on().

Un saludo

Rider_Gotha · #5 (**permalink**) 26/11/2015, 02:32

Cita:

Iniciado por Alexis88

Bienvenido a Foros del Web.

No funciona porque dicha instrucción cargó antes de que lo hagan los elementos que añadiste. La solución está en delegar el evento al elemento que contiene a los elementos añadidos.

Código Javascript:

Ver original$("#contenedor").on("click", "div", function(){
    //$(this) representará a cada <div> pulsado que se encuentre dentro del contenedor
});

Un saludo

Muchas gracias Alexis88 , ese era el problema, ya funciona perfectamente, y gracias por la rapidez ;).