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

试试这样。

Answer 2

你也可以使用这个：

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

Answer 3

我想你正在寻找这样的东西。

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

Answer 4

您是否尝试过使用$(document).on("click", "div.megaPixel", function() {} );，以便包含动态添加的元素？