单击关闭按钮时隐藏警报而不是删除它答案

【问题标题】：Hide alert when click on close button instead remove it单击关闭按钮时隐藏警报而不是删除它
【发布时间】：2014-07-20 11:57:34
【问题描述】：

在我的页面中，使用此警报显示来自服务器的响应：

    <div id="yes" class="alert alert-success" role="alert" style="display: none;">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <strong>Pronto!</strong> cadastro efetuado com sucesso! 
    </div>

当我单击警报中的关闭按钮时，有什么方法可以隐藏而不是从页面中删除？我尝试了这个（按照here 的说明），但没有成功：

$('#my-alert').on('close.bs.alert', function () {
  $(this).hide();
})

更新

我也试试这个：

    $('button.close').on("click", function(){
        $(this).parent().hide();
    });

但还是同样的问题，当我点击关闭按钮时，警报被删除了。

【问题讨论】：

hide 不删除元素，这是什么问题？
@undefined 我不想删除，但是当我单击关闭按钮时会发生这种情况。
该元素是由引导程序而不是 hide 调用删除的。
我按照这个答案的说明解决了这个问题：stackoverflow.com/a/13550556/2692962
Twitter Bootstrap alert message close and open again 的可能副本

标签： jquery twitter-bootstrap

【解决方案1】：

我为这个问题找到的解决方案：

为隐藏元素创建一个新的数据属性。

Javascript：
$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide();
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});
然后在标记中将 data-dismiss 更改为 data-hide。示例在 jsfiddle。
$("." + $(this).attr("data-hide")).hide();
这将隐藏所有具有在 data-hide 中指定的类的元素，即： data-hide="alert" 将隐藏所有带有警报类的元素。

基于此主题中发布的答案：Twitter Bootstrap alert message close and open again

【讨论】：

【解决方案2】：

使用引导关闭.bs.alert 事件：

$('.alert').on('close.bs.alert', function (event) {
    event.preventDefault();
    $(this).addClass('hidden');
  });

【讨论】：

我改用$(this).fadeOut()。

【解决方案3】：

我已经尝试了这些解决方案，但对我不起作用。您只需从标记中删除“data-dismiss”属性并创建新函数即可：

    $('.alert').on('click','.close',function(){
        $(this).closest('.alert').slideUp();
   });

【讨论】：

【解决方案4】：

在上述 cmets 的帮助下完成并删除了“data-dismiss”

$('.close').on('click', function(e) {
     $('.alert').fadeOut();
});

【讨论】：

【解决方案5】：

that above answer is correct but there are one issue So, place this answer

使用 [data-hide=alert] 检测点击事件优于 [data-hide]。因为如果您可以在同一屏幕中多次使用 data-hide 属性，那么对于隐藏特定的 div，您将面临问题。所以，用 [{yourAttributeName}={attributeValue}] 值检测点击事件

$("[data-hide=alert]").on("click", function(){ 
     $("." + $(this).attr("data-hide")).hide();
     // -OR-
     // $(this).closest("." + $(this).attr("data-hide")).hide();
     
     // -OR-
     // ... do stuff as above answer 
     // otherwise do changes as per your need
}

【讨论】：

【解决方案6】：

你做错了试试这个，因为在你的情况下按钮类是关闭的并且 div id 是yes

$('button.close').on('click', function () {
  $("#yes").hide();
})

【讨论】：