我想在单击 Jquery 警报块上的关闭标志时执行一些 Jquery 事件。我的视图代码如下::
<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 事件。
如果您使用的是 Bootstrap 3，则需要执行以下操作：
$('#my-alert').on('close.bs.alert', function () {
//code
});
我知道这已经很老了，但这值得一看
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">×</a>
<strong>Note!</strong> Please read the comments carefully.
</div>
当您关闭时，与警报对应的 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">×</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>
这就是绑定关闭事件的方式
$('#my-alert').bind('close', function () {
//do something…
})
PS。您应该阅读手册，所有内容都在其中。