When rendering partial views how the jquery's $(document).ready() react?

In $(document).ready(), I am producing a model popup to add items on the page and it is working fine when the page loads for the first time, but it don't show the modal popup again if it is called at least once, so please tell me where I am doing anything wrong that it don't show the modal view?

OR

Does jquery's ready() is called only once when the page loads?

here is the jquery:

$(document).ready(function () {

            //select all the a tag with name equal to modal
            $('a[name=modal]').click(function (e) {
                //Cancel the link behavior
                e.preventDefault();

                //Get the A tag
                var id = $(this).attr('href');

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set heigth and width to mask to fill up the whole screen
                $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                //transition effect     
                $('#mask').fadeIn(1000);
                $('#mask').fadeTo("slow", 0.8);

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                //Set the popup window to center
                $(id).css('top', winH / 2 - $(id).h开发者_运维知识库eight() / 2);
                $(id).css('left', winW / 2 - $(id).width() / 2);

                //transition effect
                $(id).fadeIn(2000);

                // replacing text of divErrorMsg
                var htmlStr = $("#divErrorMsg").html();
                if (htmlStr != null && htmlStr.length > 0) {
                    htmlStr = null;
                    $("#divErrorMsg").text('');
                }
            });
       });

and here is the link where the popup is being called:

<a name="modal" href="#iPopup" class="button smallButton">Add Item</a>

and the iPopup:

<div id="Popups">
        <div id="iPopup" class="popup">
        <a class="closeButton">x</a>
        <div class="popupContent">
          <h3>Choose a question type</h3>
                  <ul class="chooseQuestion">
             <li>
            <div class="short">
            <label>Question 1</label>
              <input />
              <p class="description">Eg. This is a description.</p> 
              </div>
                          <%= Ajax.ActionLink("Text", "action", new { id = tId }, new AjaxOptions() { UpdateTargetId = "tItems" }, new { @class = "button" })%>
                     </li>
                     <li>
            <div class="short">
            <label>Question 2</label>
              <input />
              <p class="description">Eg. This is a description.</p> 
              </div>
                          <%= Ajax.ActionLink("Text", "action", new { id = tId }, new AjaxOptions() { UpdateTargetId = "tItems" }, new { @class = "button" })%>
                     </li>
                  </ul>
            </div>
    </div>
        <div id="mask"></div>
    </div>

$(document).ready(function () {

Any block inside a ready statement will be called when the page is ready. If the page is already it gets called immediatly

Yes, .ready() is called once when the page loads. Just register your click handler with .delegate() and it'll dynamically pick up new elements loaded by AJAX!

http://api.jquery.com/delegate/

* EDIT *

Using Raynos's idea that .delegate() is somehow evil, you'd instead need to register your click handler again every time the DOM is changed on partial reload. To do this, you'd have to find the JS callback that's executed on partial reload (presuming there is one) and put all your original code in it:

//select all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
    ...
});