How to trigger close.bs.alert, I'm trying to alert-dismissible (in my case 'remove' button), but it doesn't triggered, what did I do wrong?
<div class="alert alert-success alert-dismissible fade show" role="alert">
<a class="alert-link" id="myalert" href="#">test</a>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><h6>Remove</h6></button>
</div>
<script>
$("#myalert").on('close.bs.alert', function () {
alert('The myAlert is about to be closed.');
});
</script>
</div>
<script type="text/javascript"
src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript"
src="~/vendor/formvalidation.io/js/plugins/Bootstrap.min.js"></script>
You should be targeting the alert div instead of the anchor tag inside the jQuery selector for close.bs.alert event. Check below example -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">Remove</span>
</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.alert').on('close.bs.alert', function () {
alert('The myAlert is about to be closed.');
})
</script>
</body>
</html>