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

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:

<pre><code>$('#addD').on(&quot;<b>hidden.bs.modal</b>&quot;, function () { alert(&quot;blah&quot;); }); </code></pre>

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

Demo in jsFiddle