Question

我有一个警告框，该警告框使用jquery隐藏，并在按下按钮后运行带有ajax调用的PHP代码并正常运行时显示。但是，每当我刷新网站页面时，警报都会闪烁一秒钟并隐藏。如何解决这个问题？

警告代码：

<div class="row justify-content-md-center event-alert">
 <div class="col-12">
 <div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Your Event has been Successfully Created!</strong>
    <button type="button" class="close" data-dismiss="alert" aria- 
    label="Close">
    <span aria-hidden="true">&times;</span>
 </button>
</div>
</div>
</div>

Ajax代码：

$('document').ready(function(){
    $('#event-error').hide();
    $('.event-alert').hide();
    // event form submission
    $('#create').click(function(){
        var event_name = $('#event-name').val();
        var event_date = $('#event-date').val();
        var event_venue = $('#event-venue').val();
        var description = $('#description').val();
        var date_pattern = /(\d{2})-(\d{2})-(\d{4})/;
        var data = 'event-name='+ event_name + '&event-date=' + event_date  + 
       '&event-venue=' + event_venue + '&description=' + description;
        if( event_name == "" || event_date == "" || event_venue == "" || 
        description == "")
        {
            $('#event-error').show();
            return false;
        }

         else if(!date_pattern.test(event_date)){
            $('#date-error').show();
            return false;
        }
        else{

            $.ajax({
                type: "POST",
                url: "event_data.php",
                data: data,
                success: function(){

                    $('.event-alert').show();
                }
            });
            $('#event-name').val("");
            $('#event-date').val("");
            $('#event-venue').val("");
            $('#description').val("");
            return false;
        }

    });

如何避免警报闪烁？

页面刷新期间隐藏的Bootstrap警报闪烁吗？

0 个答案: