Question

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

OR

当页面加载时，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

是的，页面加载时会调用.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) {
    ...
});

Answer 2

$(document).ready(function () {

当页面准备就绪时，将调用ready语句中的任何块。如果该页面已经被称为 immediatly

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

2 个答案: