CODEWITHSUNDEEP
twitter-bootstrap
user1681703
user1681703

Reputation: 11

Twitter bootstrap modal event not firing

I am trying to call a function when a modal window is closed but it's not working.

My code is: 

<script type="text/javascript">

    $('#myModal').bind('hidden', function () {
        alert("blah");
    });

</script>

<div id="myModal" class="modal hide fade">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <br />
    Test
  </div>
  <div class="modal-body">
    <p>Modal body</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn primary">Primary</a>
    <a href="#" class="btn secondary">Secondary</a>
  </div>
</div>
<button type="button" data-toggle="modal" data-target="#myModal">Launch modalbggg</button>

Any ideas?

Upvotes: 1

Views: 8922

Answers (5)

Kashif Raza
Kashif Raza

Reputation: 84

You just need to declare a variable for the ID of the modal. And then bind it to the hidden event.

var $modal = $('#myModal');

$modal.on('hidden.bs.modal', function(e) {
   // console.log("modal is closed....");
});

Upvotes: 0

Rahul Pawar
Rahul Pawar

Reputation: 1036

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

Upvotes: 0

mhaligowski
mhaligowski

Reputation: 2222

  1. Documentation says to use on, not bind
  2. You sure you included all the source?

  3. Why not using jQuery's magical function:

    $(function() {
    $('#myModal').bind('hidden', function () {
        alert("blah");
    });
});

Upvotes: 1

user2452626
user2452626

Reputation: 19

Łukasz Niemier,

I encountered the same issue and found the reason. When the event function is defined, myModal is not yet defined. So, try to move the script any where below the line 

<div id="myModal" class="modal hide fade">

and it would work.

simbirsk was correct. Your code works perfectly in jsfiddle. The reason is in jsfiddle, the script is at the bottom of the html content.

By the way, on and bind both work.

Edit: The best solution is to wrap your script around the ready function. Then you can place it any where on the page

$().ready(function () {

   $('#myModal').bind('hidden', function () {
        alert("blah");
    });
});

Upvotes: 1

albertedevigo
albertedevigo

Reputation: 18411

Your code works perfectly. See here: http://jsfiddle.net/5sJYk/

Ensure that you are using the propper version of Twitter Bootstrap and jQuery, and that you are calling them correctly.

Upvotes: 2

Related Questions