Перестановка событий в jQuery после обновления Ajax (обновленная панель)

У меня есть несколько элементов ввода и опции на моей странице, каждая из которых (ну почти) имеет событие, связанное с обновлением какого-либо текста на странице после их изменения. Я использую jQuery, который действительно очень классный:)

Я также использую Microsoft Ajax, используя UpdatePanel. Причина, по которой я делаю это, состоит в том, что определенные элементы создаются на странице на основе некоторой логики на стороне сервера. Я действительно не хочу объяснять, почему я использую UpdatePanel, даже если бы он мог (с некоторыми усилиями) перезаписать, чтобы использовать только jQuery Мне все еще нужна эта UpdatePanel.

Вы, наверное, догадались - когда у меня есть обратная передача в UpdatePanel, события jQuery перестают работать. Я действительно ожидал этого, поскольку "postback" на самом деле не является новой обратной передачей, поэтому мой код в document.ready, который связывает события, больше не будет запущен. Я также подтвердил свое подозрение, прочитав его в библиотеках справки jQuery.

В любом случае у меня осталась проблема восстановления моих элементов управления после обновления UpdatePanel с обновлением DOM. Мне предпочтительно нужно решение, которое не требует добавления на страницу большего количества файлов .js(плагинов jQuery), но что-то настолько же просто, как возможность поймать UpdatePanel "afterupdating", где я могу просто вызвать мой метод для перепроверки всех элементов формы.

Ответ 1

Поскольку вы используете ASP.NET AJAX, у вас будет доступ к обработчику событий pageLoad, который будет вызываться каждый раз, когда страница будет возвращена, будь то полная или частичная из UpdatePanel. Вам просто нужно включить функцию на свою страницу, не требуется подключение.

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

Ответ 2

Или вы можете проверить последние функции jQuery в реальном времени с помощью метода on().

Ответ 3

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

Ответ 4

Как и в jQuery 1.7, рекомендуется использовать jQuery.on() синтаксис.

Убедитесь, что вы настроили событие на документе, а не на объект DOM. Например, это будет прервано после обратной передачи UpdatePanel:

$(':input').on('change', function() {...});

... потому что ': input' были переписаны. Сделайте это вместо:

$(document).on('change', ':input', function() {...});

Пока документ находится вокруг, любые входы (в том числе обновления UpdatePanel) будут запускать обработчик изменений.

Ответ 5

Используйте следующий код

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

Ответ 6

Вы можете использовать jQuery и делегирование событий. В основном, перехватывают события в контейнерах, а не каждый элемент, и запрашивают event.target и запускают script на основе этого.

Он имеет множество преимуществ в том, что вы уменьшаете уровень шума кода (нет необходимости перепроверять). это также проще в памяти браузера (меньше событий, связанных с DOM.)

Быстрый пример здесь.

плагин jQuery для упрощения делегирования событий.

P.S Я на 99% уверен, что делегирование будет в ядре jQuery в следующей версии.

Ответ 7

Используйте следующий код. Вам нужно проверить, что элемент управления будет использовать datapicker:

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>

Ответ 8

         <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

into в "if" вы можете поместить код, который вам нужно выполнить каждый раз, когда панель обновления делает AsyncPostBack.

Ответ 9

Привяжите свои события, используя новый метод 'live' jQuery. Он привяжет события ко всем вашим нынешним элементам и всем будущим. Cha ching!:)