i am trying to do some things when i close a bootstrap modal on the website i am making. The modal closes, but the event is not fired. I have done some troubleshooting and can not figure out what i might have done wrong. All the guides i can find have the same solution, but it does not work on my end. Does anyone know what i might have done wrong?

Script:

$( function(){
    $('#exampleModal').on('hide.bs.modal', function (e) {
        alert('modal closed');
        document.getElementById("errorContainer").classList.add("hidden");
    });
});

HTML:

<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <h5  id="exampleModalLabel">Choose a date</h5>
                    <button type="button"  data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div >
                
                    <p>Date: <input type="text" id="datepicker"><button onclick="gotoEvent();">To event</button></p>
                    <div id="errorContainer" ><p>Choose date first!</p></div>
                </div>
                <div >
                    <button type="button"  data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

bootstrap and jquery are linked in and work in other functions. (bootstrap version:4.6.0, Jquery version:3.5.1)

Edit: Found the problem, forgot to remove link to old jquery version when i upgraded to a newer jquery version. This is why it worked in other functions and not this one.

CodePudding user response：

Do you add ur modals dynamically? if yes try something like that:

$(document).on('hide.bs.modal', '#exampleModal', function(e) { 
    alert('modal closed');
    document.getElementById("errorContainer").classList.add("hidden");
}

CodePudding user response：

You can try the following code:

$(document).ready(function(){
    $('#exampleModal').on('hide.bs.modal', function () {
        alert('modal closed');
        document.getElementById("errorContainer").classList.add("hidden");
    });
});

CodePudding user response：

I found the problem. When i added a newer version of jquery i forgot to remove the link in to the old version. This is why some jquery functions worked and this one did not. It works now!