How to trigger close in alert-dismissible-CodePudding

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  role="alert">
    <a  id="myalert" href="#">test</a>
       <button type="button"  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>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
    <div  role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button"  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/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>