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.

Verile

$('#mymodal').on('hide.bs.modal', ...)? – Aluminothermy

typed wrong sorry, the id's are correct :-) – Verile

Make sure you bind event when DOM is ready. $(function() { $('#mymodal').on('hide.bs.modal', ...) }). – Aluminothermy

@Aluminothermy That's actually working, thanks! Could you please explain what the problem is in an answer? I'm new to this.. – Verile

possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? – Wholehearted

Answer 1

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

Eau

sorry for that, the id's are correct. I just changed them for the question :-) – Verile

If your id is correct then it must work. See my updated answer and demo – Eau

Your edited answer is working. What's the clue with the $(function(){}); ? – Verile

Specify a function to execute when the DOM is fully loaded. Read $.ready(). But I thought your code is working for the first time then it will work next time too. – Eau

Thanks I'll read it. That's the same thought as I had.. If it's working one time why not the next. – Verile

Life saver... Thanks mate. – Corneliuscornell

Answer 2

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.

Fitted

Answer 3

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/

Wayne

Answer 4

Update 2024 Bootstrap 5 with React

we can use useEffect for listen close, open modal event

  useEffect(() => {
    document
      .getElementById("login-modal")
      .addEventListener("hidden.bs.modal", function (event) {
        console.log("close ok");
      });
  }, []);

Kearse