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

これも使用できます：

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

Answer 2

これは、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 3

$(document).on("click", "div.megaPixel", function() {} );動的に追加された要素が含まれるように、代わりに使用してみましたか?

Answer 4

このようなものを探していると思います。

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