1

我正在尝试学习 jquery 和 twitter 引导程序。我有两种警报：

  1. 页面加载时发出警报
  2. 简单示例中基于操作（按钮单击）的警报。

在页面加载创建的警报上按“x”会清除它。按钮加载的内容不会发生同样的情况。我的脚本中是否缺少某些内容？

<div class="container">
    <div class="row">
        <div class="span12">

            <div id="alert-section" class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>Page load alert!</h4>
                This alert is displayed when page loads.
            </div>

            <button type="button" id="btn-alert" href="#">Open my alert</button>

            <div id="le-alert"></div>

        </div>
    </div>
</div>

    $('#btn-alert').click(function () {
      $('#le-alert').addClass('alert in');
        $('#le-alert').append('<button type="button" class="close" data-dismiss="alert">&times;</button><h4>Alert title</h4><p>This alert is dispalyed on button click</p>');
    });

    $('.close').click(function () {
      $(this).parent().removeClass('alert in');
      $(this).parent().empty();
    });

代码演示：http: //jsfiddle.net/HgeUn/

4

5 回答 5

4

您正在附加一个带有“关闭”类的按钮，但在创建目标按钮之前绑定到该类的所有元素。你需要委托。

$('body').on('click', '.close', function() {
    $(this).parent().removeClass('alert in').empty();
});

如果可行，body请用较低级别的一致包装器替换以逆转 DOM 遍历工作。

于 2013-08-19T22:41:03.323 回答
3

当您在按钮中使用 'data-dismiss' 属性并第一次关闭按钮时，整个元素会消失并且您不会再次看到该元素，直到您重新加载/刷新页面。因此，如果您希望在不刷新页面的情况下重复弹出警报，请删除 data-dismiss 属性。

使用 jquery 的 hide() 方法关闭警报，而不是将其从文档对象模型中完全删除。参考这个，Twitter Bootstrap 警报消息关闭并再次打开同样的问题。

例如 -

<div class="alert alert-success fade in">
        <button type="button" class="close">&times;</button>
        <strong>Sucess!</strong> Values updated!!

关闭按钮的 Javascript -

$('.close').click(function () {
    $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 
});
于 2013-08-20T23:09:11.513 回答
0

我也遇到了这个问题，简单地用点击事件破解关闭按钮的问题是我仍然需要访问标准的引导程序警报关闭事件。

我的解决方案是编写一个小型的、可定制的 jquery 插件，它可以以最少的麻烦注入一个正确形成的 Bootstrap 3 警报（根据需要可以有或没有关闭按钮），并允许您在盒子关闭后轻松地重新生成它。

有关用法、测试和示例，请参阅https://github.com/davesag/jquery-bs3Alert 。

于 2014-05-06T11:30:28.397 回答
0

您正在寻找的是事件委托，只有.close当您调用时文档中的 div$('.close')才会绑定单击处理程序。任何在之后创建的都不会绑定事件处理程序。

$(document).on('click', '.close', function () {
  $(this).parent().removeClass('alert in');
  $(this).parent().empty();
});

http://jsfiddle.net/HgeUn/1/

于 2013-08-19T22:42:50.637 回答
0

如果您想在删除警报消息时具有淡出效果，请尝试以下操作：

HTML

<div class="alert alert-success fade in">
        <strong>Well done!</strong> You can remove this important alert message.
        <button type="button" class="close">&times;</button>
</div>

jQuery

$('.alert-success .close').click(function () {
        $(this).parent().hide('slow', function(){ $(this).remove(); });
});
于 2013-12-02T13:32:08.490 回答