Bootstrap 警报在初次出现后不会关闭

Question

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

我有一个 smarty 模板，里面有一个 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 函数或使用 delay 函数，例如 https://codepen.io/anon/pen/XPpJGe。

Answer 2

正在使用 $('.alert').alert()
用$('.alert').alert('close')或$('.alert').alert('dispose')关闭它

Bootstrap 3.3 Documentation - Alerts

Bootstrap 4.0 Documentation - Alerts

Bootstrap 警报在初次出现后不会关闭

Bootstrap alert won't close after initial appearance

php

ajax

jquery

smarty3

bootstrap-4