Tengo un div que agrego con el siguiente código:

function generateBall(){
    var colors = ["fe0ba5", "00c0ff", "21f1a5", "f13e21", "e819fb", "3ae319", "ff9900", "512e5e", "284184"];
    var width = $('.reaction_area').width() - 40;
    var height = $('.reaction_area').height() - 40;
    var a = Math.floor(Math.random()*(width - 40 + 1) + 40);
    var b = Math.floor(Math.random()*(height - 40 + 1) + 40);
    var size = Math.floor(Math.random()*(32 - 24 + 1) + 24);
    var color = colors[Math.floor(Math.random() * colors.length)];

    $('.reaction_area').append('<div class="ball_2" style="left: '+a+'px; top: '+b+'px; height: '+size+'px; width: '+size+'px; background: #'+color+'" data-id="'+wave+'"></div>');
}

Y luego tengo esto:

$('.ball_2').on('click', function(){
    $(this).remove();
    wave--;
});

Y no está funcionando. Tengo otros elementos que agrego así y hacer clic en ellos funciona, ¿por qué esto no?

También lo intenté con $('document').on('click', '.ball_2', function(){ //code }); y tampoco funcionó.

3
ALSD Minecraft 8 may. 2016 a las 03:35

4 respuestas

La mejor respuesta

Eso sería $(document) (sin las comillas).

$('.ball_2').on('click', ...) no funciona porque el elemento .ball_2 aún no existe en el momento de la ejecución. Sin embargo, $(document).on('click', '.ball_2', ...) funciona porque coloca el controlador en un elemento ancestro y aprovecha un fenómeno llamado "burbujeo de eventos". En términos simples, se considera que se hace clic en un antepasado cuando se hace clic en un descendiente.

4
Joseph 8 may. 2016 a las 00:44

Agregue la siguiente línea en la función generateBall (). Debido a que el div se crea dinámicamente, debemos vincular la función cuando se crea. Y esta declaración puede permitir que cada '.ball_2' tenga su propia función de eliminación, suponga que puede haber más de un '.ball_2'.

$('.ball_2:last').on('click', function(){$(this).remove());});
1
EricMok 8 may. 2016 a las 04:06

Use delegado :

 $('.reaction_area').delegate('.ball_2', 'click', function (event) {

  $(this).remove();
    wave--;
});
1
Ali Panahian 8 may. 2016 a las 05:16

Dado que el elemento con la clase ball_2 se genera dinámicamente.

$(document).on('click','.ball_2', function(){
    $(this).remove();
    wave--;
});
2
Peter Darmis 8 may. 2016 a las 00:52