0

На сайте имеется навигация по страницам, которые подгружаются посредством AJAX и есть такой скрипт:

$(document).ready(function() {
  // no decimal places (default)
  $('.abbr-number').abbrNum();

  // decimal places as attribute
  $('.abbr-number-attr').abbrNum();

  // decimal places as option
  $('.abbr-number-opt').abbrNum({
    decPlaces: 2
  });
});

Проблема в том, что этот скрипт срабатывает только на первой странице.

Подскажите, пожалуйста, как подружить этот скрипт с AJAX?

И, если можно, желательно с примером моего кода.

1 ответ 1

0

Событие $(document).ready не срабатывает при ajax-запросах.

Возможный вариант решения:

  1. Выделить тело функции $(document).ready в отдельную функцию (назовем ее, например, formatNumbers). Это необходимо для того, чтобы функцию можно было вызвать как из события $(document).ready, так и из события окончания ajax-операции:

    function formatNumbers() {
           // no decimal places (default)
           $('.abbr-number').abbrNum();

               // decimal places as attribute
               $('.abbr-number-attr').abbrNum();

               // decimal places as option
                $('.abbr-number-opt').abbrNum({
                  decPlaces: 2
               });
            };

     $(document).ready(function() {
       formatNumbers(); 
     });

  1. Далее потребуется модификация процедур, отвечающих за аякс-загрузку данных. Так как в JQuery существует несколько вариантов аякс-загрузки данных, однозначно ответить на вопрос, как именно требуется вносить правку, сложно.

Если, к примеру, загрузка происходит через реализацию, аналогичной следующей:

 $.ajax({
    url: "....",
  })
  .done(function(msg) {

  });

то для реализации вашей задачи в событие done нужно добавьте вызов formatNumbers:

$.ajax({
    url: "....",
 })
.done(function( msg ) {
   formatNumbers(); // Вызываем функцию по окончании ajax-загрузки данных
});

Альтернативный вариант — подписка на глобальное событие выполнения всех (в пределах сайта) аякс-запросов.

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

   $(document).ajaxSuccess(function() {
      formatNumbers();
    });
2
  • Спасибо Павел, сработал ваш альтернативный вариант (глобальный), но как вы сказали он не желателен (( 10 июл 2017 в 15:35
  • Если второй вариант (через глобальный обработчик) отрабатывает нормально (т.е. обеспечивает нужный вам функционал и, при этом, не ломает существующий), то используйте, почему бы и нет? В принципе, существующая реализация formatNumbers() не должна привести к каким-либо поломкам кода. 10 июл 2017 в 15:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.