分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery 新 div 不会使用 $(document).on 设置动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决jQuery 新 div 不会使用 $(document).on 设置动画？

开发过程中遇到jQuery 新 div 不会使用 $(document).on 设置动画的问题如何解决？下面主要结合日常开发的经验，给出你关于jQuery 新 div 不会使用 $(document).on 设置动画的解决方法建议，希望对你解决jQuery 新 div 不会使用 $(document).on 设置动画有所启发或帮助；

所以，我有一个动画功能。有效。你将鼠标悬停在一些方块上，它们会留下一点痕迹，然后又淡出：

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

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

.squareAnim {
    animation-name: changecolor;
    animation-duration: 4s;
  }

  @keyframes changecolor {
    0% {BACkground-color: rgb(5,5,5);}
    25% {BACkground-color: rgba(255,20);}
    50% {BACkground-color: rgba(20,255);}
    100% {BACkground-color: rgb(5,5);}
  }

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

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

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

但是，它不起作用。我不知道 $(document).ready 是否是多余的（这是我尝试委托），但不管有没有它，它仍然不起作用。有什么我遗漏的吗？

编辑jsfiddle

解决方法

您必须在创建元素时重新绑定事件（即 onresize）。如果只绑定一次 onready，它不会传播到新创建的元素。

此外，onhover 已弃用（在 jQuery 1.9 中删除），应替换为 onmouseenter 和 onmouSELEave.

来自jQuery's docs：

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

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