渲染部分视图时 jquery 的 $(document).ready() 如何反应？

Question

在 $(document).ready() 中，我正在生成一个模型弹出窗口以在页面上添加项目，并且当页面第一次加载时它工作正常，但如果调用它，它不会再次显示模式弹出窗口至少一次，所以请告诉我我在哪里做错了什么，它没有显示模式视图？

或者

当页面加载时jquery的ready()只被调用一次？

这是 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).height() / 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('');
                }
            });
       });

这是调用弹出窗口的链接:

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

和 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>

Answer 1

$(document).ready(function () {

当页面准备好时，ready 语句中的任何块都会被调用。如果页面已经准备好，它就会被立即调用

Answer 2

是的，.ready() 在页面加载时被调用一次。只需使用 .delegate() 注册您的点击处理程序，它就会动态拾取 AJAX 加载的新元素！

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

* 编辑*

使用 Raynos 的想法，即 .delegate() 在某种程度上是邪恶的，您需要在每次部分重新加载时更改 DOM 时再次注册您的点击处理程序。为此，您必须找到在部分重新加载时执行的 JS 回调（假设有一个）并将所有原始代码放入其中：

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