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

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

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

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

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

9 78
asp.net-mvc jquery asp.net-ajax updatepanel

9 ответов:

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

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

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

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

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

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

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

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

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

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

14

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

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

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

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

пример здесь.

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

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

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>
5

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

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


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

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

4

свяжите свои события с помощью нового метода "live" jQuery. Он будет связывать события со всеми вашими настоящими элементами и всеми будущими тоже. Ча-чин! :)

2