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', ...)有效，因为它将处理程序放在祖先元素上并利用称为“事件冒泡”的现象。简单来说，单击后代时会认为祖先被点击了。

Answer 2

由于动态生成了具有类$(document).on('click','.ball_2', function(){ $(this).remove(); wave--; });的元素。

.nav-logo img 
  {
    max-width: 100px; //width of div
    max-height: 100px;//height of div
  }

Answer 3

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

fromFile:

Answer 4

使用委托：

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

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

jQuery on（'click'，...）不处理附加元素

4 个答案: