javascript - 如何在主 "div"内的随机 "div"创建点击事件？

Question

我有一个主要的“Div”，点击它后它被分成 n X n 矩阵。每次点击它里面的随机颜色 div。直到这里都很好，现在我想在那个随机的彩色 div 上创建一个点击功能，该 div 当前位于整个主要“div”内的任何位置..

$(window).load(function() {
  var no = 1,
    $m = $(".main_div"),
    size = 200;

  $m.live('click', function() {
    no++;
    var n = no * no,
      i, _size;
    $m.empty();
    for (i = 0; i < n; i++)
      $m.append($('<div title=' + i + '/>'));
    _size = size / no;
    $m.find('> div').css({
      width: _size,
      height: _size
    });

    var colors = ["#FFFFFF", "#CC00CC", "#CC6699", "#0099CC", "#FF99FF"];
    var rand = Math.floor(Math.random() * colors.length),
      randomTotalbox = Math.floor(Math.random() * $('.main_div div').length);
    $m.find("div:eq(" + randomTotalbox + ")").css("background-color", colors[rand]);
    var rand = Math.floor(Math.random() * colors.length);
  });
});

  .main_div {
    width: 200px;
    height: 200px;
    background-color: #9F0;
  }
  .main_div > div {
    float: left;
    box-shadow: 0 0 1px #000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_div" id="demo">

</div>

这是一个 fiddle ... Code

Answer 1

所以你是说每当你点击(例如在一个按钮上)时，可点击的 div 就会被添加到 DOM

这意味着那些 div 一开始不存在，所以你可以使用

Babak Naffas 答案以及.delegate 方法

例子

$('body').delegate('.main_div > div','click',function(){
  // here goes your instructions

});

更多详情您可以查看: jQuery: difference between .click() AND .on("click")