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

Ajax request on dismissal of twitter bootstrap alerts

本文关键字:Ajax 请求 于解 twitter      更新时间:2023-09-26

我正在使用Twitter Bootstrap中的"alert"功能来显示用户通知,如下所示:

<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 3.0中,您需要使用名称空间事件名称:

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

根据Bootstrap关于警报的文档,我将绑定到closed或close事件,这是Bootstrap自定义的。

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

有两个事件通过API公开:

  1. close -立即触发
  2. 关闭-在所有动画完成后开火。我选择关闭-这样你就可以立即操作,如果他们在动画完成之前导航/关闭,它仍然是隐藏的。

data属性能够让服务器端脚本区分警报。标记应该是:

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