关于解除 twitter 引导警报的 Ajax 请求答案

【问题标题】：Ajax request on dismissal of twitter bootstrap alerts关于解除 twitter 引导警报的 Ajax 请求
【发布时间】：2013-06-15 22:53:57
【问题描述】：

我正在使用 Twitter Bootstrap 中的“警报”功能来显示用户通知，如下所示：

<div class="notification alert alert-info">
 <button type="button" class="close" data-dismiss="alert">&times;</button>
 My message goes here
</div>

这些通知在用户关闭它们之前一直存在，因此当用户单击“关闭”按钮时，我想向服务器发出一个 ajax 查询，指示应该永久关闭通知。

我正在使用 jQuery 的 on() 函数，如下所示：

$(document).on('click', '.notification .close', function (e) {
    alert('hi!');
    console.log(e);
    e.preventDefault();
});

这很好用，但我想知道是否有“Bootstrappy”方式来做到这一点？

【问题讨论】：

我的第一印象是您的解决方案很好-但是-在回答之后-我认为您的问题是正确的。 “正确的方法”可能包括抽象/封装的附带好处 - 例如 - BootStrap 插件可以模拟移动设备的触摸事件，而 jQuery.on('click') 可能无法捕获。

【解决方案1】：

在Bootstrap 3.0 中你需要使用命名空间的事件名称：

$('.alert').bind('closed.bs.alert', function () {
        var id = $(this).data('some_id');
        $.get('closed.php?id='+id);
})

【讨论】：

【解决方案2】：

根据Bootstrap docs on alerts，我会绑定到bootstrap自定义的关闭或关闭事件。

$(document).on('close', '.alert', function  () 
{
    var id = $(this).data('some_id'); 
    $.get('closed.php?id='+id);
});

通过 API 公开了两个事件：

数据属性是为了能够让服务器端脚本区分警报。标记将是：

<div class="alert" data-some_id='foobar'>
    Close me!
</div>

【讨论】：