Question

Next code worked in Jquery 1.5.1, but in Jquery 1.8.0 this code not worked, why?
problem with css after add span.
How fix this lag?

ORIGINAL FILES HERE

if include in index.html jquery.1.5.1 code worked, but if inclue jquery 1.8.1, code worked not all…

css:

#checkbox .CheckBox{
    background:url('checkbox_33.png') no-repeat right bottom;
    display:inline-block;
    min-width:110px;
    /* height:33px; */
    height:33px;
    white-space:nowrap;
    position:relative;
    cursor:pointer;
    margin-left:14px;
}

jquery code

(function($){
    $.fn.Checkbox = function(options){

        // Default On / Off labels:

        options = $.extend({
            labels : ['ON','OFF']
        },options);

        return this.each(function(){
            var originalCheckBox = $(this),
                labels = [];

            // Checking for the data-on / data-off HTML5 data attributes:
            if(originalCheckBox.data('on')){
                labels[0] = originalCheckBox.data('on');
                labels[1] = originalCheckBox.data('off');
            }
            else labels = options.labels;

            // Creating the new checkbox markup:
            var checkBox = $('<span>',{
                className   : 'CheckBox '+(this.checked?'checked':''),
                html:   '<span class="CBContent">'+labels[this.checked?0:1]+
                        '</span><span class="CBPart"></span>'
            });

            // Inserting the new checkbox, and hiding the original:
            checkBox.insertAfter(originalCheckBox.hide());

            checkBox.click(function(){
                checkBox.toggleClass('checked');

                var isChecked = checkBox.hasClass('checked');

                // Synchronizing the original checkbox:
                originalCheckBox.attr('checked',isChecked);
                checkBox.find('.CBContent').html(labels[isChecked?0:1]);
            });

            // Listening for changes on the original and affecting the new one:
            originalCheckBox.bind('change',function(){
                checkBox.click();
            });
        });
    };
})(jQuery);

Answer 1

When you are creating the span element, try changing className to class:

// Creating the new checkbox markup:
var checkBox = $('<span>',{
    class   : 'CheckBox '+(this.checked?'checked':''),
    html:   '<span class="CBContent">'+labels[this.checked?0:1]+'</span><span class="CBPart"></span>'
});