javascript - ('click' 上的 jQuery，...)无法处理附加元素

Question

我有一个 div，我附加了以下代码:

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>');
}

然后我有这个:

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

而且它不起作用。我还有其他元素，我像那样附加并点击它们有效，为什么这不起作用？

我也尝试过 $('document').on('click', '.ball_2', function(){//code }); 但没有成功要么。

Answer 1

那将是 $(document)(不带引号)。

$('.ball_2').on('click', ...) 不起作用，因为元素 .ball_2 尚不存在执行时间。但是，$(document).on('click', '.ball_2', ...) 之所以有效，是因为它将处理程序放在祖先元素上并利用了一种称为“事件冒泡”的现象.简单来说，当点击后代时，祖先被认为被点击。