Jquery 只为我在第 Asp.net 页上显示的引导程序警报工作一次

Jquery Works only once for alert of Bootstrap I am showing on page Asp.net

本文关键字：工作 引导程序 一次 显示 Asp net Jquery      更新时间：2023-09-26

我希望它每次都能工作。每次我单击保存按钮而不刷新页面时。

这是我的代码。

Admin.Master 中的 Jquery 代码： 

<script>
$(document).ready(function () {
    $("#successalert").hide();
    $("#sucess").click(function showAlert() {
        $("#successalert").alert();
        $("#successalert").fadeTo(2000, 500).slideUp(500, function () {
            $("#successalert").alert('close');
        });
    });
});

设置.aspx代码

<div class="modal" id="menuiconmodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Menu</h4>
          </div>
          <div class="modal-body">                
       // some input tags    
          </div>
          <div class="modal-footer">
            <a href="javascript:;" id="sucess" class="btn btn-primary" data-dismiss="modal">Save</a>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>  
    <!-- /.modal -->
    // Alert Showing for a while 
    <div class="alert alert-success alert-dismissible" id="successalert">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-check"></i> Hey!</h4> Menu Item Added Sucessfully !!!!
    </div>

这是 Bootstrap 本身的问题，如本期所述。

您可以尝试此处提到的一些解决方法。

使用 Jquery addClass（） 和 removeClass（） 找到解决方案

.CSS 更改了引导程序中的 .alert 类.css具有以下属性 

display:none;

添加了用于显示的新类

.showing
    {
        display:inherit;            
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
    }

j查询代码

<script>
$(document).ready(function () {
    $("#sucess").click(function () {         
        $("#successalert").removeClass("alert");           
        $("#successalert").addClass("showing");           
        $("#successalert").fadeTo(2000, 500).slideUp(500, function () {
            $("#successalert").alert('close');
        });
    });
});
</script>
相关文章：