Question

我遇到了一个问题，询问如何在5秒后淡出Bootstrap警报，答案是以下代码。问题是，它只能工作一次，但是由于我在AJAX调用之后生成了多个警报，这是不行的。每次触发警报时，如何运行以下代码？

window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
          $(this).remove(); 
     });
}, 5000);

Answer 1

一种可能的解决方案是在显示警报并在事件处理程序中删除警报后使用自定义事件showalert

$(document).on('showalert', '.alert', function(){
    window.setTimeout($.proxy(function() {
        $(this).fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, this), 5000);
})

和

$('<div class="alert alert-error">' + 'some message' + '</div>').appendTo('#result').trigger('showalert');

演示：Fiddle

Answer 2

我认为这是因为$(this).remove();从DOM中删除了警报。实际上，您只需修改内容，而无需在每次AJAX调用后重新生成警报。

淡出多个Bootstrap警报

2 个答案: