При рендеринге частичных представлений, как реагирует jquery $ (document) .ready ()? - PullRequest
Новая
       13

При рендеринге частичных представлений, как реагирует jquery $ (document) .ready ()?

3 голосов
/ 19 мая 2011

В $ (document) .ready () я создаю всплывающее окно модели для добавления элементов на страницу, и оно работает нормально, когда страница загружается в первый раз, но оно не показывает модальное всплывающее окно снова, если он вызывается хотя бы один раз, поэтому, пожалуйста, скажите, где я делаю что-то не так, чтобы не отображалось модальное представление?

OR

Вызывается ли jquery's 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>

Ответы [ 2 ]

2 голосов
/ 19 мая 2011

$(document).ready(function () {

Любой блок внутри оператора ready будет вызван, когда страница будет готова.Если страница уже есть, она вызывается немедленно

2 голосов
/ 19 мая 2011

Да, .ready() вызывается один раз при загрузке страницы.Просто зарегистрируйте ваш обработчик кликов с помощью .delegate(), и он будет динамически подбирать новые элементы, загруженные AJAX!

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

* РЕДАКТИРОВАТЬ *

Используя идею Рэйноса о том, что .delegate() является чем-то злым, вместо этого вам нужно будет заново регистрировать свой обработчик кликов каждый раз, когда DOM изменяется при частичной перезагрузке.Чтобы сделать это, вам нужно найти функцию обратного вызова JS, которая выполняется при частичной перезагрузке (при условии, что она есть) и поместить в нее весь свой исходный код: 

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