Jquery 仅用于提醒我在 Asp.net 页面上显示的 Bootstrap答案

【问题标题】：Jquery Works only once for alert of Bootstrap I am showing on page Asp.netJquery 仅用于提醒我在 Asp.net 页面上显示的 Bootstrap
【发布时间】：2016-03-07 05:55:59
【问题描述】：

我希望它每次都能正常工作。每次点击保存按钮都没有刷新页面。

这是我的代码。

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');
        });
    });
});

Settings.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>

【问题讨论】：

你在使用更新面板吗？
不，我没有使用。
您所做的是在初始点击事件中隐藏$("#successalert").hide();，但对于第二次点击事件，您将无法看到它
在 初始阶段我想通过使用 $("#successalert").hide(); 隐藏该警报
您是在尝试警报还是模态？

标签： javascript jquery html asp.net twitter-bootstrap

【解决方案1】：

这是 issue 中详述的 Bootstrap 本身的问题。

here 提到了一些解决方法，您可以尝试一下。

【讨论】：

【解决方案2】：

使用 Jquery addClass() 和 removeClass() 找到解决方案

CSS 使用以下属性更改了 bootstrap.css 中的 .alert 类

display:none;

添加了新的展示类

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

jquery 代码

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

【讨论】：