Question

我有一个主要的“Div”，点击它后会分成n X n矩阵。每次点击它内部都有一个随机颜色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>时要求触发事件，则可以尝试

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

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

如何在主“div”中的随机“div”上创建click事件？

2 个答案: