Javascript div的随机位置和悬停函数

我发现这段代码可以随机创建一些div：

(function makeDiv(){
   var divsize = ((Math.random()*100) + 50).toFixed();
   var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
   $newdiv = $('<div/>').addClass("destruct").css({
       'width':divsize+'px',
       'height':divsize+'px',
       'background-color': color
   });

   var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
   var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

   $newdiv.css({
       'position':'absolute',
       'left':posx+'px',
       'top':posy+'px',
       'display':'none'
   }).appendTo( 'body' ).fadeIn(500, function(){
      makeDiv(); 
   }); 
})();

但它不起作用

这里有一个

因为您的div是动态生成的，请尝试：

$(document).ready(function() {
   $(document).on('mouseover', '.destruct', function(){
      $(this).css({background: '#000'});
   });
});

如果您使用的是较旧版本的jquery（>1.7），请使用：

---

有两种方法可以做到这一点。一是活动授权：

这会将绑定更改为：

$(document).on('hover', '.destruct', function(){
   $(this).css({background: '#000'});
});

…但我会尝试使用比

文档

更具体的选择器

---

另一种解决方案是在创建每个div时将

悬停

（或

鼠标悬停

，因为这应该足够了）回调分别绑定到每个div，但这可能会导致大量单独的事件绑定。

您可以绑定

.mouseenter（）

当您创建div时，或者您可以将

.mouseenter（）

绑定到文档（事件委派），正如其他答案所指出的那样。我将采用第一种方法

（函数makeDiv（）{
var divsize=（（Math.random（）*100）+50）.toFixed（）；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
$newdiv=$（''）.addClass（“析构函数”）.css({
“宽度”：divsize+'px'，
“高度”：divsize+'px'，
“背景色”：颜色
})
//魔法就在这里！
.mouseenter（函数（）{
$（this.css（{background:'#000'}）；
});
var posx=（Math.random（）*（$（document.width（）-divsize））.toFixed（）；
var posy=（Math.random（）*（$（document.height（）-divsize））.toFixed（）；
$newdiv.css({
'位置'：'绝对'，
“左”：posx+“px”，
'top'：posy+'px'，
“显示”：“无”
}).appendTo（'body'）.fadeIn（500，function（）{
makeDiv（）；
});
})();

仅我的2ct：从jQuery 1.8开始，“hover”的使用就被弃用，取而代之的是“mouseenter mouseleave”@devnull69使用

.hover

，使用名为

hover

的事件，或者两者都使用？只有“hover”作为“mouseenter mouseleave”的简写，因为使用此方法只能将一个处理程序绑定到这两个处理程序

.hover（）

尚未被弃用@devnull69我在回答中确实暗示应该使用

mouseover

（虽然

mouseenter

在这种情况下也会起到同样的作用）。你想恢复mouseout上的真实颜色吗？没有必要，但它可能对其他人有用。：）

$(".destruct").live("mouseover", function(){
    $(this).css({background: '#000'});
}); 

$(document).on('hover', '.destruct', function(){
   $(this).css({background: '#000'});
});

(function makeDiv(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').addClass("destruct").css({
        'width':divsize+'px',
        'height':divsize+'px',
        'background-color': color
    })
    // Magic happens here!
    .mouseenter(function(){
      $(this).css({background: '#000'});
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(500, function(){
       makeDiv();
    });
})();