Question

这是一个很难解释和演示的问题，基本上我使用的是PHP，Smarty，Ajax和Bootstrap的混合物。

我有一个聪明的模板，其中带有Ajax表单（此方法有效），一个PHP后端，该表单将表单详细信息添加到数据库中（这也有效），成功或失败时将显示警报，该警报来自Bootstrap CSS，将其写入页面，如下所示。

$('form').append('<div class="alert alert-success alert-dismissible" role="alert">' + data.message + '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></div>');

警报确实显示在页面中，并且警报确实关闭！但是，例如，如果我或用户想要再次使用该表单（例如，向数据库添加另一条记录），则警报确实会显示，但是这次它永远不会关闭！因此，如果我再添加10条记录，然后像往常一样在每条记录之后单击“提交”按钮，则在该窗体下将有10个永远不会关闭的警报框。

<script type="text/javascript">
    window.setTimeout(function() {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function() {
            $(this).hide();
        });
    }, 5000);
</script>

有人对我可以做的事情有想法吗？

下面的代码关闭了警报，但是关闭警报的时间有些不一致。

$(document).ready(function() {
    $('form').submit(function(event) {

        // snip

        var alertTimer1 = window.setInterval(function() {
            if (typeof alertTimer2 === 'undefined') {
                var alertTimer2 = window.setTimeout(function() {
                    $('#alert').find('.alert').fadeTo(1000, 0).slideUp(1000, function() {
                        $(this).remove();

                        window.clearInterval(alertTimer1);
                        window.clearTimeout(alertTimer2);
                    });
                }, 5000);
            }
        }, 100);
    }
}

Answer 1

setTimeout函数仅在setInterval定期检查一次的情况下执行一次。例如：https://codepen.io/anon/pen/VGPYXB

更好的解决方案可能是在添加消息后添加警报消息集setTimeout函数或使用https://codepen.io/anon/pen/XPpJGe这样的delay函数。

Answer 2

使用$('.alert').alert()初始化警报
使用$('.alert').alert('close')或$('.alert').alert('dispose')

Bootstrap 3.3 Documentation - Alerts

Bootstrap 4.0 Documentation - Alerts

首次出现后，引导警报将不会关闭

2 个答案: