JQuery и BX.ajax

В битриксе стандартные шаблоны компонентов работают с BX-библиотекой. В то время как в шаблоне сайта часто используется распространенный JQuery.

Распространенная проблема: после ajax-запроса не работают события на динамически загруженных элементах. Например:
$('.selector').click(function () {
//действия
});

Самое простое решение проблемы - использовать метод on
$("body").on('click', '.selector',function(){
//действия
});
Такой обработчик будет работать и для вновь загруженных объектов вне зависимости от того, загружен он через jquery.ajax или BX.ajax.

Рассмотрим еще один вариант. Например, Вы на странице одношагового оформления заказа используете jQuery Form Styler для стилизации форм или Datepicker для выбора даты. Эти плагины инициализируются после загрузки страницы
$(function() {
$('select').styler({
selectSearch: true
});
$( ".date" ).datepicker();
});
Все прекрасно работает, пока не происходит ajax-запрос и перезагрузка формы.
Что делать? Ловить глобальное событие ajaxComplete бесполезно, так как здесь работает BX-библиотека. Поэтому воспользуемся методом BX.addCustomEvent
BX.addCustomEvent('onAjaxSuccess', function(){
$(function() {
$('select').styler({
selectSearch: true
});
$( ".date" ).datepicker();
});
});

Этот код сработает после аякс-запроса BX.

#ajax #bitrix #BX #jquery #битрикс

---

28.05.2015