Обработка событий jQuery в UpdatePanel после обновления AJAX

Быстрый ответ

// Изменяем поведение jQuery после обновления UpdatePanel
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded((sender, args) => {
  // Работаем непосредственно с обновлёнными панелями, чтобы повысить производительность.
  args.get_panelsUpdated().forEach(panel => {
    $(panel).find('.your-selector').doSomething(); // Применяем селекторы и методы!
  });
});

Основная идея: Используйте методы add_pageLoaded и get_panelsUpdated для подписывания обработчиков событий jQuery только к недавно обновлённым элементам в UpdatePanels. Это эффективно при частичном обновлении страницы.

Оптимизируем обработку событий для динамического контента

Рассмотрим нюансы использования jQuery и UpdatePanels в управлении событиями в динамических приложениях:

Подписка на события после частичного обновления

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

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
  $('.sneaky-dynamic-selector').on('click', dynamicContentHandler); // Применим мастерство рук и поймаем элементы!
});

Элементы, определённые через .sneaky-dynamic-selector в UpdatePanels, сохранят реакцию на событие click даже после асинхронных обновлений.

Подробнее об этом расскажет наш спикер на видео

Инкапсуляция для чистоты и повторного использования кода

Продуманная инкапсуляция и грамотная организация кода способствуют его переиспользуемости. Обрабатывайте события в виде функций:

function bindDynamicEvents() {
  $('.evolving-dynamic-selector').on('click', dynamicContentHandler); // Адаптируйся к изменениям, не теряя ссылок!
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDynamicEvents);

Таким образом, bindDynamicEvents будет запускаться автоматически после обновлений UpdatePanels, гарантируя перепривязку обработчиков к динамическим элементам.

Управляем User Controls

В случае использования User Controls служебный ClientID позволяет точно указать цель привязки и избежать нежданных проблем, связанных с именованием в ASP.NET:

function bindUserControlEvents(clientID) {
  $('#' + clientID + '_btnSave').on('click', saveHandler); // Нажми и действуй!
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
  // 'crazyUserControlClientID' – предполагаемый ID вашего UserControl
  bindUserControlEvents(crazyUserControlClientID);
});

Производительность: избегаем избыточности

Для повышения производительности: связывайте обработчики событий только с теми элементами, которые часто обновляются. Это позволяет избежать лишних затрат:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded((sender, args) => {
  args.get_panelsUpdated().forEach(panel => {
    $(panel).find('.social-butterfly-control').on('click', socialHandler); // Ищем элемент с максимальной активностью!
  });
});

Настроики для jQuery плагинов

Оптимизируем работу с jQuery плагинами, минимизируя использование метода .on(), чтобы повысить производительность.

Визуализация

Работа $(document).ready с UpdatePanels напоминает радиостанцию, обслуживающую различные авто на дороге:

$(document).ready = 📻 Первый вкл. радио
UpdatePanel = 🚗 Машины, подключающиеся к вещанию

Код $(document).ready выполняется единожды:

📻👂🚗: Начальная настройка (только при загрузке страницы)

Каждый новый UpdatePanels требует своего обновления:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(UpdatePanelReady); // Обновляем "бортовую" систему!

Заключительный принцип:

📻 Начальная настройка, 🔄 UpdatePanels требуют индивидуальной настройки
// "Подключаемся" один раз и поддерживаем активность для динамического содержимого

Контролируем область видимости и специфичность

В больших приложениях не стоит зацикливаться на каждой строке кода. Используйте область видимости и специфичность для эффективного взаимодействия с кодом.