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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

Быстрый пример here.

jQuery plugin для упрощения проведения мероприятий.

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

Answer 3

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

Answer 4

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

Answer 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; 
     } 
    } 
} 

Answer 6

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

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


     } 

      </script> 

     </ContentTemplate> 
    </asp:UpdatePanel> 

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

Answer 7

Связать свои события, используя новый «живой» метод jQuery. Он привяжет события ко всем вашим нынешним элементам и всем будущим. Ча цзин!:)

Answer 8

Используйте следующий код, Вы должны подтвердить контроль будет использовать 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> 

Answer 9

По JQuery 1.7, рекомендуемый способ сделать это состоит в использовании jQuery's .on() синтаксиса.

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

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

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

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

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