Некорректная работа плагина jquery для стилизации чекбоксов

Рейтинг: 1Ответов: 1Опубликовано: 08.06.2011

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

Вот демо страница с формой: http://pastehtml.com/view/awf4co19w.html

Вот код самого плагина:

jQuery.fn.beautyCheckbox = function(){
    return this.each(function(){
    var checkbox = $(this).filter('[type=checkbox]'); //отсеиваем из всех элементов только чекбоксы
    checkbox.css('display','none');//прячем стандартные чекбоксы
    $('<div class="checkboxImitation"></div>').insertBefore(checkbox);//создаем див, который будет имитировать их работу
    var checkboxImitation = $('div.checkboxImitation');    
    checkboxImitation.addClass('unchecked').hover( //присваиваем класс "не отмеченный" и вешаем события
        function(){
        if($(this).hasClass('checked')){$(this).addClass('checkedHover')}//проверяем в каком состоянии находится элемент и в соответсвии с этим производим манипуляции
        else($(this).addClass('uncheckedHover'))
        },     
        function(){
        if($(this).hasClass('checked')){$(this).removeClass('checkedHover')}
        else($(this).removeClass('uncheckedHover')) }
    ).click(function(){// вешаем событие, которое будет указывать спрятанным чекбоксам их состояние
        if($(this).hasClass('checked')){$(this).removeClass().addClass('checkboxImitation unchecked uncheckedHover');
            $(this).next('input:checkbox').attr('checked',true);
        }
        else{$(this).removeClass().addClass('checkboxImitation checked checkedHover');
            $(this).next('input:checkbox').attr('checked',false);
        }
    });    
    });
}

Буду рад любой помощи и советам.

Ответы

▲ 2Принят

У вас строчка

var checkboxImitation = $('div.checkboxImitation');

засасывает все чекбоксы на странице, т. е. с каждой итерацией each их становится на один больше. Обработчик click вы навешиваете на них на все сразу, т. е. там, где он вызывается чётное число раз, кажется, что событие не навешивается.

Попробуйте вот так:

var checkboxImitation = $('<div class="checkboxImitation"></div>').insertBefore(checkbox);