Javascript jQuery on（'；单击'；，…）不处理附加元素

我有一个附加了以下代码的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>');
}

它不起作用了。我有其他元素，我像那样附加，点击它们工作，为什么不呢

我也尝试过使用

$（'document'）。在（'click'，'.ball_2'，function（）{//code}）上也不起作用。
那将是
$（文档）
（没有引号）

$（'.ball_2'）。on（'click'，…）
不工作，因为执行时元素
.ball_2
尚不存在。但是，
$（document）.on（'click'，'.ball_2'，…）
可以工作，因为它将处理程序放在一个祖先元素上，并利用了一种称为“事件冒泡”的现象。简单地说，当单击后代时，祖先被视为被单击。
因为类为
ball_2
的元素是动态生成的

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

在generateBall（）函数中添加以下行。因为div是动态创建的，所以我们应该在创建函数时绑定它。这个语句可以让每个'.ball_2'都有自己的移除函数，假设可能有多个'.ball_2'

$('.ball_2:last').on('click', function(){$(this).remove());});

使用委托：

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

  $(this).remove();
    wave--;
});

谢谢！另一个元素起作用了，因为它已经在页面中，但被隐藏了，我现在觉得自己很笨：(
 $('.reaction_area').delegate('.ball_2', 'click', function (event) {

  $(this).remove();
    wave--;
});