Javascript jQuery新divs赢得'；t使用$（文档）设置动画。打开

所以，我有一个动画功能。成功了。您将鼠标悬停在一些方块上，它们会留下一些痕迹，然后逐渐消失：

 $(".square").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("squareAnim");  
});

$(".square").hover(function(){
  $(this).addClass("squareAnim");        
});

后来，我决定根据页面大小添加/删除方块。我得到了帮助

嗯，我不得不更改动画功能，因为它是绑定的，不能用于新的div。我研究并尝试了不同的功能，这就是我现在所处的位置：

$(document).ready(function(){
    $(document).on("webkitAnimationEnd mozAnimationEnd animationend", ".square", function(){
      $(this).removeClass("squareAnim");
    });
    $(document).on("hover", ".square", function(){
      $(this).addClass("squareAnim");
    });
});

但是，它不起作用。我不知道

$（document.ready

是否是多余的（这是我试图授权的），但不管有没有它，它仍然不起作用。有什么我遗漏的吗

---

编辑

创建元素时必须重新绑定事件（即

调整大小

）。如果只将它绑定一次

onready

，它将不会传播到新创建的元素

另外，

onhover

已被弃用（在jQuery 1.9中删除），应替换为

onmouseenter

和

onmouseleave。

发件人：

jQuery 1.8中已弃用，1.9中已删除：名称“hover”用作字符串“mouseenter mouseleave”的缩写。它为这两个事件附加一个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“hover”伪事件名与接受一个或两个函数的.hover（）方法混淆

$(document).ready(function(){
    $(document).on("webkitAnimationEnd mozAnimationEnd animationend", ".square", function(){
      $(this).removeClass("squareAnim");
    });
    $(document).on("hover", ".square", function(){
      $(this).addClass("squareAnim");
    });
});

$(window).on("resize", function() {
  multiplyNode(contain.querySelector('.square'), canAdd(), false);
  $(document).on("webkitAnimationEnd mozAnimationEnd animationend", ".square", function() {
    $(this).removeClass("squareAnim");
  });
  $(document).on("mouseenter", ".square", function() {
    $(this).addClass("squareAnim");
  });
}).resize();