Question

我想点击警报Block of Jquery上的关闭标志来执行一些Jquery事件。我的VIew代码如下::

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

我的Js代码如下::

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

            });

根据上面的代码，我无法在点击“X”按钮时检测到或执行Jquery事件。

Answer 1

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

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

Answer 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>

Answer 3

当你关闭时，对应于警报的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>

Answer 4

这是绑定close事件的方式

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

PS。你应该阅读手册，一切都在里面。

在Bootstrap警报中关闭类按钮的Jquery事件

4 个答案: