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

Question

我有一个主要的“Div”，在点击后它被分成n X n矩阵。 每次点击它内部都有一个随机颜色div。 直到这里它没关系，现在我想在随机多彩div上创建一个click功能，目前在整个主“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> 

这是一个小提琴...... 代码

Answer 1

所以你说每次点击时都会将可点击的div添加到DOM中（例如在按钮上）

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

Babak Naffas的回答以及.delegate方法

例

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

});

有关更多详细信息，您可以检查： jQuery：.click（）和.on（“click”）之间的区别

Answer 2

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

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

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