當渲染部分視圖時，jquery的$（document）.ready（）如何反應？

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

$(document).ready(function() {

內準備好所有塊語句將在頁面準備就緒時調用。如果頁面已經是它被稱爲立刻

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) { 
    ... 
});