javascript - $ ('div' ).click 功能不适用于所有 div

Question

出于某种原因，尽管我编写了一个选择所有 div 的函数，但当我单击它们时，我的“megaPixel”动态生成的 div 没有响应。所有其他 div 在单击时都会响应。

function init($input){
  for (i=1; i <= 20; i++){
  $('body').append('<div class="megaPixel" id="megaPixel_' + $input + '"></div>');
  $input = $input + 1;
  }
};

$('div').click(function(){
  $('.megaPixel').css('background-color', 'red');
});

init(1);

Answer 1

这是因为您在生成 div 之前分配了点击监听器。

function init($input){
  for (i=1; i <= 20; i++){
  $('body').append('<div class="megaPixel" id="megaPixel_' + $input + '"></div>');
  $input = $input + 1;
 }
 $('div').click(function(){
    $('.megaPixel').css('background-color', 'red');
 });
};

init(1);

像这样尝试一下。