logo标签列表

Bootstrap中警告框关闭类按钮的Jquery事件

htmljquerytwitter-bootstrap
3

我希望在点击Jquery提示框上的关闭标志时执行一些Jquery事件。我的视图代码如下：

<div class=' alert alert-block fade in'  >
    <button type='button' class='close' data-dismiss='alert'>×</button>
    <p>Just Close Me  </p>
<div>

以下是我的 JavaScript 代码：

$('button.close').click(function () {
                var id = $(this).attr('data-id');
                alert("deleted list is"+id);

            });

根据上述代码，我无法检测或在单击“X”按钮时执行JQuery事件。
data-id 属性在哪里？ - Adil Shaikh
通过使用 Knockout 绑定，返回其给定值。 - Rahul RJ
4个回答
13

如果您正在使用Bootstrap 3，则需要执行以下操作：

$('#my-alert').on('close.bs.alert', function () {
//code
});
7
除了这个回答外，还要补充说明：'close.bs.alert' 事件发生在元素被移除之前。因此，如果你想在元素被移除后进行一些操作（比如根据其缺失重新调整大小），那么请改用 'closed.bs.alert' 事件。@AdRock 的回答演示了这一点。 - hubson bropa
2

当您执行关闭操作时，与警报对应的DOM元素将从DOM中删除。

请尝试使用以下替代方法：

<html>
<head>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>

    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="myform">
        <input type="submit" value="Submit">

    </form>
<div id="messages" class="hide" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <div id="messages_content"></div>
</div>
<script>
    $('#myform').submit(function(e) {
        $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
        $('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>');
        $('#modal').modal('show');
        e.preventDefault();
    });
    $('#messages').on('close.bs.alert', function (e) {
        $('#messages').removeClass('alert alert-success alert-dismissible').addClass('hide').slideDown().show();
        e.preventDefault();

    });

</script>
</body>

2
我知道这已经有些过时了，但这值得一看。 http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=alert-events 
<script type="text/javascript">
$(document).ready(function(){
    $("#myAlert").bind('closed.bs.alert', function(){
        alert("Alert message box has been closed.");
    });
});  
</script>

<div id="myAlert" class="alert alert-info">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Note!</strong> Please read the comments carefully.
</div>
0

这是如何绑定关闭事件的方法

$('#my-alert').bind('close', function () {
    //do something…
})

顺便提一下，你应该阅读手册，里面包含了所有的信息。

1
你从哪里获取了这个id属性的名称？ - Rahul RJ
但是，正如您在我的代码中所看到的那样，我没有给出任何ID，因此我不必提供ID，因为警告框不止一次。 - Rahul RJ
那么就给一个或使用类名。 - slash197
我正在使用Bootstrap的关闭按钮，因此它不会执行任何事件。 - Rahul RJ
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接