Question

如您所见，我有列表和按钮。当按钮上触发“click”事件时，我会动态地将新元素添加到列表中。将新元素添加到列表后，我想使用javascript在悬停状态下为其设置动画，但它无法正常工作。硬编码列表元素一切都很好。

首先想到的解决方案是硬编码列表元素的最大数量，并隐藏不必要的内容。但是，如果我不知道元素的最大数量呢？

HTML

<section> 
  <div class='wrap'>
    <ul>
      <li class="box"></li>
      <li class="box stacked"></li>
    </ul>
  </div>
  <button> addBox </button>
</section>

CSS /萨斯

.box
  width: 100px
  height: 100px
  border: 1px solid black
  background: orange
  flex-basis: 1

.stacked
  margin-left: -50px

.up 
  animation-name: boxUp
  animation-duration: 300ms
  animation-timing-function: ease-in-out
  animation-delay: 0s
  animation-iteration-count: 1
  animation-direction: normal
  animation-fill-mode: forwards


@keyframes boxUp
  from
    transform: translate(0, 0)
  to
    transform: translate(0, -25px)

的Javascript

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

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

Answer 1

由于它是动态添加的元素，因此在附加事件处理程序时它不会出现在DOM中。因此，您必须从一开始就使用DOM中存在的父级的委托（即，使用父级，该父级是页面的静态内容，并且从加载开始就存在）。

您可以使用以下任一项：

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

或您最终使用的那个：

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

CodePen Demo

Css3动态添加元素没有动画

1 个答案: