Jquery iCheck дублируются input при вызове Ajax

 

Здесь хочется рассказать больше не про конкретный баг с определенным плагином JQuery а про методику устранения возможных подобных недоработок.

В одном из моих рабочих проектов установлена старая версия плагина JQuery iCheck 1.0.2 (Git). Данный плагин позволяет делать красивый дизайн checkbox'ов и чтото еще, толком не разбирался что, но он плотно встроен в инфраструктуру проекта и, если его туда встроили, значит для чего-то нужен был, а вычленять и выкидывать себе дороже.

И в этой версии была замечена такая проблема, что при вызове через Ajax новой страницы, содержащей подключенную функцию инициализации данного плагина, контент дублируется с каждой загрузкой.

Выглядит это так:

Дублирование Jquery iCheck
Дублирование элементов div при ajax подгрузке

 

А происходит так из-за того, что при каждой подгрузке контента с Ajax в html код добавляются новые <div> элементы, отрисовывающие дублирующийся элемент.

В моем случае у меня есть базовая страница, которая инициирует в своем шаблоне плагин iCheck

    //шаблон базовой страницы
    
   //функция инициирует плагин iCheck для всех input типа radio
   $('input[type=radio]').iCheck({
       
    });
   

И также есть Ajax страница, которая вызывается функцией Jquery Ajax и в своем шаблоне также имеет функцию, инициирующую плагин iCheck абсолютно идентичную выше описанной.

Справедливости ради нужно отметить что в более новой версии плагина JQuery iCheck 2.0 данная проблема была устранена. Но установка новой версии потребует полную ревизию всего проекта на предмет "что где отвалилось и перестало работать". Поэтому проще использовать какой-то другой метод решения проблемы.

И здесь нам на помощь приходят селекторы, а в частности селектор :not(). Решение для кода выглядит так: в базовой странице добавляем всем input, к которым применяется iCheck новый класс "ajax_no_icheck".

    //контент базовой страницы
    
   //Добавляем класс "ajax_no_icheck", для которого не будет инициироваться плагин iCheck
   <input type="radio" class="ajax_no_icheck" name="type" value="1" />
   

А в шаблоне страницы, которая подгруждается с помощью Ajax в функции вызова плагина iCheck добавляем селектор :not() с добавленным выше классом классом.

    //шаблон страницы, подгружаемой Ajax
    
   //функция инициирует плагин iCheck для всех input типа radio 
   //кроме input с классом "ajax_no_icheck"
   $('input[type=radio]:not(.ajax_no_icheck)').iCheck({
       
    });
   

И после этого ничего уже не дублируется.

Итак, в целом, есть три варианта решения приведенной выше проблемы:

  1. отказаться от использования плагина в подгружаемом Ajax содержимом (или вообще отказаться от использования),
  2. установить более свежую версию плагина, где проблема уже решена внутри его кода
  3. установить дополнительный класс для элементов базовой страницы контента и в функции инициации плагина на странице, подгружаемой через Ajax в селекторах прописать исключение инициации плагина для элементов данного класса
Кейсы