Question

出于某种原因我的“megaPixel”动态生成的div在我点击它们时没有响应，尽管编写了一个选择所有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() {} );，以便包含动态添加的元素？

$（'div'）。click函数不适用于所有div

4 个答案: