CODEWITHSUNDEEP
jquerytwitter-bootstrap
user1005310
user1005310

Reputation: 877

Hide event of bootstrap modal not being fired

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");
    });
}

Upvotes: 0

Views: 1200

Answers (2)

KyleMit
KyleMit

Reputation: 29839

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

Demo in jsFiddle

Upvotes: 1

0Ds0
0Ds0

Reputation: 598

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

Upvotes: 1

Related Questions