Bootstrap modal event not fired

Question

I want to simply do some logic after my modal has been dismissed.

In the modal I have a button:

<button type="button" class="btn btn-primary" onclick="$('#mymodal').modal('hide');">Save changes</button>

In the view I'm waiting for the event being fired, but it never does.

 $('#mymodal').on('hide.bs.modal', function (e) {
       alert('event fired')
});

I tried to put breakpoints in chrome dev tools, the event is only hit at the first load of the view. After that the breakpoint is never reached again. Am I doing something wrong?

By the way, the modal is hiding the way I want.

Make sure you bind event when DOM is ready. `$(function() { $('#mymodal').on('hide.bs.modal', ...) })`. — dfsq, Feb 12 '15 at 08:20
@dfsq That's actually working, thanks! Could you please explain what the problem is in an answer? I'm new to this.. — greenhoorn, Feb 12 '15 at 08:26
possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — showdev, Feb 13 '15 at 01:00

Rohan Kumar · Accepted Answer · 2021-01-01T12:44:14.193

18

In your view you need to add dom ready function and write your code in it like,

$(function(){ // let all dom elements are loaded
    $('#mymodal').on('hide.bs.modal', function (e) {
        alert('event fired')
    });
});

Working Demo

edited Jan 01 '21 at 12:44

answered Feb 12 '15 at 08:17

Rohan Kumar

38,998
11
69
99

sorry for that, the id's are correct. I just changed them for the question :-) – greenhoorn Feb 12 '15 at 08:18
If your id is correct then it must work. See my updated answer and [demo](https://jsfiddle.net/rohankumar1524/po9sk1kn/) – Rohan Kumar Feb 12 '15 at 08:27
Your edited answer is working. What's the clue with the $(function(){}); ? – greenhoorn Feb 12 '15 at 08:28
1

Specify a function to execute when the DOM is fully loaded. Read [$.ready()](http://api.jquery.com/ready). But I thought your code is working for the first time then it will work next time too. – Rohan Kumar Feb 12 '15 at 08:31
Thanks I'll read it. That's the same thought as I had.. If it's working one time why not the next. – greenhoorn Feb 12 '15 at 08:36

Novocaine · Answer 2 · 2018-11-14T09:30:00.380

While the accepted answer is correct, I had a slightly different scenario which I didn't find an answer to.

I'm creating my modal's dynamically, so they don't exist on the page load. I'm adding them to the DOM with a JQuery .append('body'). Therefore

$('#mymodal').on('hide.bs.modal', function(e) {

doesn't work....I had to change my event listener to

$(document).on('hide.bs.modal', '#mymodal', function(e) {

to work. Hopefully this will help others in the same situation as me.

score 0 · Answer 3 · answered Aug 19 '19 at 22:00

Make sure that you actually have the Bootstrap Javascript library included in your page. That was my issue. The Bootstrap docs hint at this, but they omit it from the code examples.

Here are the files/CDNs for it, since their site avoids linking it from most of the relevant pages, for some reason: https://getbootstrap.com/docs/4.1/getting-started/download/

Bootstrap modal event not fired

3 Answers3