Здесь хочется рассказать больше не про конкретный баг с определенным плагином JQuery а про методику устранения возможных подобных недоработок.
В одном из моих рабочих проектов установлена старая версия плагина JQuery iCheck 1.0.2 (Git). Данный плагин позволяет делать красивый дизайн checkbox'ов и чтото еще, толком не разбирался что, но он плотно встроен в инфраструктуру проекта и, если его туда встроили, значит для чего-то нужен был, а вычленять и выкидывать себе дороже.
И в этой версии была замечена такая проблема, что при вызове через 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({ });
И после этого ничего уже не дублируется.
Итак, в целом, есть три варианта решения приведенной выше проблемы: