Hide event of bootstrap modal not being fired

Question

I have my modal defined in cshtml as shown below. When I click on the cross mark or on the close button, I want to perform some action but the hide event is not getting fired.

<div id="addD" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addPatientLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="addLabel">Create</h3> </div> <div class="modal-body"> <p class="validateTips"></p> <table> <tr> <td class="TemplateLabel"> Name: </td> <td align="left"> <input placeholder="name" type="text" name="Name" data-bind="value: NewP.Name" id="SignUpName" class="SignUp text ui-widget-content ui-corner-all" /> </td> </tr> </table> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary" onclick="SaveD()">Save changes</button> </div> </div>

Here is my js code:

$(document).ready(function () { $('#AddD').on("hidden", function () { debugger; alert("blah"); }); }

check your ID in html vs. the ID in javascript. mismatch?

Will Tate
– Will Tate

2014-07-21 15:29:51 +00:00
Commented Jul 21, 2014 at 15:29 — Will Tate
– Will Tate, Commented Jul 21, 2014 at 15:29
why don't you use live bootstrap sample ?

mohammadreza berneti
– mohammadreza berneti

2014-07-21 15:32:01 +00:00
Commented Jul 21, 2014 at 15:32 — mohammadreza berneti
– mohammadreza berneti, Commented Jul 21, 2014 at 15:32
Yes, the ID was a mismatch. It works now. Thank you

user1005310
– user1005310

2014-07-21 16:11:25 +00:00
Commented Jul 21, 2014 at 16:11 — user1005310
– user1005310, Commented Jul 21, 2014 at 16:11

0Ds0 · Accepted Answer · 2014-07-21 15:33:52Z

1

It seems that you give the id of '#addD' to the modal and then expect the element $('#AddD') to trigger the event.

answered Jul 21, 2014 at 15:33

0Ds0

5985 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KyleMit Over a year ago

This does not resolve the entire issue as the event name is still wrong.

0Ds0 Over a year ago

The event name is not wrong as the user seems to be using bootstrap 2 at least according to modal window markup getbootstrap.com/2.3.2/javascript.html#modals

0Ds0 Over a year ago

Although if user is using bootstrap3 then the event should be 'hidden.bs.modal' indeed :)

KyleMit · Accepted Answer · 2014-07-21 15:53:46Z

For Bootstrap 3.0:

According to the docs, the available event types are as follows:

show.bs.modal

shown.bs.modal

hide.bs.modal

hidden.bs.modal

loaded.bs.modal

You have to use the properly namespaced event like this:

$('#addD').on("hidden.bs.modal", function () { alert("blah"); });

Also, as was already pointed out, the ID selector was different between your HTML and Javascript

Collectives™ on Stack Overflow

Hide event of bootstrap modal not being fired

2 Answers 2

3 Comments

For Bootstrap 3.0:

Demo in jsFiddle

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

For Bootstrap 3.0:

Comments

Related