如何为 jQuery 中的前置元素创建事件

Question

我想在我的网站上发生事件时创建通知。通知将添加到元素中，并显示通知 window。然后我希望能够控制这个元素，从某种意义上说，我希望能够用它做更多的动作。

    $('#footer_notification').prepend('<li>something happened</li>',
       function(){$(this).delay('3000').fadeOut();}
    )

即当此事件发生时，通知将显示为 <ul> 元素中的 <li> 元素。然后 3 秒后该元素将淡出。

我上面的代码不起作用，因为似乎没有用于前置的回调功能。那么我怎样才能控制这个新添加的元素，请记住可以同时添加多个元素？

Answer 1

我想这可能对你有帮助：

let $li = $('<li>').text('something happened');
$('#footer_notification').prepend($li);
setTimeout(()=>{
  $li.fadeOut();
}, 3000);

只需创建要添加的标签元素并使用 var（即 $li）对其进行引用，之后，您就可以用它做任何想做的事了。

编辑

回答你的其他问题，首先，fadeOut 方法不会删除该项目，它只是隐藏它（将 css 显示道具添加到 none）。所以，如果你想检查这个，你需要获取 footer_notification 的子元素并检查带有 display:block 的元素，这意味着它有活动通知，如果有 none，这意味着没有活动通知，例如：

$(()=>{
  let $foo = $('#footer_notification');
  let $liNo = $('<li>').text('no notifications');
  $foo.append($liNo);
  $('#add').on('click',()=>{
    $liNo.remove();
    let $li = $('<li>').text('something happened');
    $foo.prepend($li);
    setTimeout(()=>{
      $li.fadeOut({
        done: ()=>{
          if($foo.children().css('display')=='none'){
            $foo.append($liNo);
          }
        }
      });
    }, 3000);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="footer_notification">
</ul>


<button id="add" type="button">+ Notification</button>

注意我在 fadeOut 中使用了 done 选项，这会在动画结束后触发给定的函数，这是您应该在通知隐藏后放置要执行的代码的地方。希望我能帮上忙

如何为 jQuery 中的前置元素创建事件

How to create events to a prepended element in jQuery

jquery

prepend