如何在主“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>

这是一个小提琴...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")

Answer 2

如果您要求在单击构成矩阵的 NxN <div>s 时触发事件，您可以尝试

 $(".main_div > div").on('click', function (evt) { ... } );

这会将函数（第二个参数）附加到矩阵中<div> 的点击事件，就像使用相同选择器的 CSS 类一样。