Javascript Css3动态添加元素未设置动画

如你们所见，我有列表和按钮。当按钮上触发“单击”事件时，我会动态地将新元素添加到列表中。在将新元素添加到列表中之后，我想用javascript在悬停状态下为其设置动画，但它不起作用。使用硬编码的列表元素，一切都很好

想到的第一个解决方案是硬编码列表元素的最大数量以及何时隐藏不必要的内容。但是，如果我不知道元素的最大数量呢

Html

Javascript

$('button').click(function(e) {
  $('ul').append($('<li>').attr('class', 'box stacked'));
});

$('.box').hover(function() {
  $(this).addClass('up');
}, function(){
  $(this).removeClass('up');
});

$（“按钮”）。单击（函数（e）{
$（'ul'）.append（$（'li>'）.attr（'class'，'box stacked'））；
});
$（'.box'）.hover（函数（）{
$（this.addClass（'up'）；
}，函数（）{
$（this.removeClass（'up'）；
});

因为它是一个动态添加的元素，所以在连接事件处理程序时，它不会出现在DOM中。因此，您必须从一开始就使用DOM中存在的父级委托（也就是说，使用作为页面静态内容的父级，并且从加载开始就存在）

您可以使用以下选项之一：

$('body').on('mouseenter mouseleave', `.box`, function() {
  $(this).toggleClass('up');
});

或者您最终使用的以下版本：

$('ul').on('mouseenter mouseleave', 'li', function(){ 
  $(this).toggleClass('up'); 
});

---

如果是动态添加的元素，请使用委派。谢谢。找到了解决办法$（'ul'）.on（'mouseenter mouseleave'，'li'，function（）{$（this.toggleClass（'up'）；}）；是的，把答案贴出来

$('body').on('mouseenter mouseleave', `.box`, function() {
  $(this).toggleClass('up');
});

$('ul').on('mouseenter mouseleave', 'li', function(){ 
  $(this).toggleClass('up'); 
});