我有一个 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 });
但没有成功要么。
最佳答案
那将是 $(document)
(不带引号)。
$('.ball_2').on('click', ...)
不起作用,因为元素 .ball_2
尚不存在执行时间。但是,$(document).on('click', '.ball_2', ...)
之所以有效,是因为它将处理程序放在祖先元素上并利用了一种称为“事件冒泡”的现象.简单来说,当点击后代时,祖先被认为被点击。
关于javascript - ('click' 上的 jQuery,...)无法处理附加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37095041/