Question

作为ajax调用的响应，我使用5秒钟的延迟来关闭回显所在的div。

这是我的div弹出窗口：

<div class="echo">
   <div class="echomessage" role="alert">
      <span class="closebtn">X</span>  
      <?php echo '<i class="fas fa-check-square"></i><b>' . $numberFiles . '</b> items are deleted!<br />'; ?>
   </div>
</div>

ajax成功：

success:function(data){

            $('.echo').html(data);                  
    $('.echomessage').delay(5000).fadeOut(500);// close auto after 5 sec
}

要手动关闭popup-div，请使用以下代码：

 // close echo manually
    $(document).on('click','.closebtn',function() {     
        $(this).closest('.echomessage').fadeOut(500);
    });

问题：当我想通过在5秒钟内单击X关闭回音消息时，它不起作用。

成功删除$('.echomessage').delay(5000).fadeOut(500);时，点击后立即关闭

我如何拥有这两种选择：如果不单击，则在5秒后关闭，如果单击立即关闭？

小提琴： https://jsfiddle.net/3v0noy9h/

Answer 1

您可以使用异步setTimeout函数来代替使用延迟...

$(document).on('click','.closebtn',function() {     
        $(this).closest('.echomessage, .echomessage-exists, .echomessage-download').fadeOut(500);
    });
setTimeout(function () {$('.echomessage').fadeOut()}, 5000);

如何在5秒后使用jQuery自动关闭div时手动关闭div弹出窗口

1 个答案: