Problema con los eventos al crear nuevos elementos

[LoBo2024]

Saludos,

Tengo un problema con un script hecho en jquery. Desde jquery tengo que cuando haga click sobre los elementos de la clase libre, haga una serie de acciones, si pongo los elementos directamente en el html no hay problema, pero como esos elementos son variables, los he creado directamente desde jquery con la siguiente función:

Código:

            function inicializar(x,y){
                total = x * y;
                for (var a=1;a<=total;a++){
                    $('#mapa').append('<li id="espacio_'+a+'" class="libre"></li>');
                    if(a % x == 0){$('#mapa').append('<br class="clear">');}
                }
            }

Ahora el problema es que no le asocia a la clase libre lo que tiene que hacer. ¿Alguien sabe como solucionarlo? Muchísimas gracias por adelantado.

[David]

Debes asociar el listener después de que hayas creado los elementos.

[LoBo2024]

Ok, ahora el problema es que como eso es variable, tengo que digamos destruirlo y volverlo a construir con el tamaño que sea correcto. Como asocio el listener con lo que te acabo de contar? Muchísimas gracias de nuevo por adelantado!

[David]

No entiendo muy bien, ¿en qué momento lo destruyes y vuelves a construir? Muestra el código.

De todos modos, también tienes la opción de usar un evento delegado:

Código Javascript:

$("#mapa").on("click", ".libre", function(e) {
    // Click en un elemento con la clase "libre"
});
 

[LoBo2024]

Ey muchas gracias por este último código con el he conseguido que funcione. Yo lo que hacía era crear un mapa básico y luego la gente podía cambiarlo por el que quisiera y por eso destruía con un remove los elementos del ul y luego los creaba de nuevo con el tamaño exigido.

No conocía lo de los eventos delegados, muchas gracias por la información, me ha ido de fabula ;)