possible fix for #245

build/js/bootstrap-switch.js

@@ -46,18 +46,6 @@
           offText: this.$element.data("off-text"),
           labelText: this.$element.data("label-text")
         });
-        this.$wrapper = $("<div>");
-        this.$container = $("<div>");
-        this.$on = $("<span>", {
-          html: this.options.onText
-        });
-        this.$off = $("<span>", {
-          html: this.options.offText
-        });
-        this.$label = $("<label>", {
-          "for": this.$element.attr("id"),
-          html: this.options.labelText
-        });
         addClasses = (function(_this) {
           return function(cls) {
             var c, classes, _i, _len;
@@ -72,33 +60,47 @@
             return classes.join(" ");
           };
         })(this);
-        this.$wrapper.addClass((function(_this) {
-          return function() {
-            var classes;
-            classes = ["" + _this.options.baseClass, "" + _this.options.baseClass + "-" + _this.options.wrapperClass];
-            classes.push(_this.options.state ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
-            if (_this.options.size != null) {
-              classes.push("" + _this.options.baseClass + "-" + _this.options.size);
-            }
-            if (_this.options.animate) {
-              classes.push("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
-            }
-            if (_this.options.disabled) {
-              classes.push("" + _this.options.baseClass + "-" + _this.options.disabledModifierClass);
-            }
-            if (_this.options.readonly) {
-              classes.push("" + _this.options.baseClass + "-" + _this.options.readonlyModifierClass);
-            }
-            if (_this.$element.attr("id")) {
-              classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
-            }
-            return classes.join(" ");
-          };
-        })(this));
-        this.$container.addClass(addClasses(this.options.containerClass));
-        this.$on.addClass("" + (addClasses(this.options.handleOnClass)) + " " + this.options.baseClass + "-" + this.options.onColor);
-        this.$off.addClass("" + (addClasses(this.options.handleOffClass)) + " " + this.options.baseClass + "-" + this.options.offColor);
-        this.$label.addClass(addClasses(this.options.labelClass));
+        this.$wrapper = $("<div>", {
+          "class": (function(_this) {
+            return function() {
+              var classes;
+              classes = ["" + _this.options.baseClass, "" + _this.options.baseClass + "-" + _this.options.wrapperClass];
+              classes.push(_this.options.state ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
+              if (_this.options.size != null) {
+                classes.push("" + _this.options.baseClass + "-" + _this.options.size);
+              }
+              if (_this.options.animate) {
+                classes.push("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
+              }
+              if (_this.options.disabled) {
+                classes.push("" + _this.options.baseClass + "-" + _this.options.disabledModifierClass);
+              }
+              if (_this.options.readonly) {
+                classes.push("" + _this.options.baseClass + "-" + _this.options.readonlyModifierClass);
+              }
+              if (_this.$element.attr("id")) {
+                classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
+              }
+              return classes.join(" ");
+            };
+          })(this)()
+        });
+        this.$container = $("<div>", {
+          "class": addClasses(this.options.containerClass)
+        });
+        this.$on = $("<span>", {
+          html: this.options.onText,
+          "class": "" + (addClasses(this.options.handleOnClass)) + " " + this.options.baseClass + "-" + this.options.onColor
+        });
+        this.$off = $("<span>", {
+          html: this.options.offText,
+          "class": "" + (addClasses(this.options.handleOffClass)) + " " + this.options.baseClass + "-" + this.options.offColor
+        });
+        this.$label = $("<label>", {
+          "for": this.$element.attr("id"),
+          html: this.options.labelText,
+          "class": addClasses(this.options.labelClass)
+        });
         this.$element.on("init.bootstrapSwitch", (function(_this) {
           return function() {
             return _this.options.onInit.apply(element, arguments);

src/coffee/bootstrap-switch.coffee

@@ -17,13 +17,6 @@ do ($ = window.jQuery, window) ->
         onText: @$element.data "on-text"
         offText: @$element.data "off-text"
         labelText: @$element.data "label-text"
-      @$wrapper = $ "<div>"
-      @$container = $ "<div>"
-      @$on = $ "<span>", html: @options.onText
-      @$off = $ "<span>", html: @options.offText
-      @$label = $ "<label>",
-        for: @$element.attr "id"
-        html: @options.labelText
 
       addClasses = (cls) =>
         if not $.isArray cls
@@ -34,22 +27,29 @@ do ($ = window.jQuery, window) ->
           classes.push "#{@options.baseClass}-#{c}"
         classes.join " "
 
-      # add classes to elements
-      @$wrapper.addClass =>
-        classes = ["#{@options.baseClass}", "#{@options.baseClass}-#{@options.wrapperClass}"]
-
-        classes.push if @options.state then "#{@options.baseClass}-#{@options.onModifierClass}" else "#{@options.baseClass}-#{@options.offModifierClass}"
-        classes.push "#{@options.baseClass}-#{@options.size}" if @options.size?
-        classes.push "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
-        classes.push "#{@options.baseClass}-#{@options.disabledModifierClass}" if @options.disabled
-        classes.push "#{@options.baseClass}-#{@options.readonlyModifierClass}" if @options.readonly
-        classes.push "#{@options.baseClass}-id-#{@$element.attr("id")}" if @$element.attr "id"
-        classes.join " "
-
-      @$container.addClass addClasses @options.containerClass
-      @$on.addClass "#{addClasses @options.handleOnClass} #{@options.baseClass}-#{@options.onColor}"
-      @$off.addClass "#{addClasses @options.handleOffClass} #{@options.baseClass}-#{@options.offColor}"
-      @$label.addClass addClasses @options.labelClass
+      @$wrapper = $ "<div>",
+        class: do =>
+          classes = ["#{@options.baseClass}", "#{@options.baseClass}-#{@options.wrapperClass}"]
+
+          classes.push if @options.state then "#{@options.baseClass}-#{@options.onModifierClass}" else "#{@options.baseClass}-#{@options.offModifierClass}"
+          classes.push "#{@options.baseClass}-#{@options.size}" if @options.size?
+          classes.push "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
+          classes.push "#{@options.baseClass}-#{@options.disabledModifierClass}" if @options.disabled
+          classes.push "#{@options.baseClass}-#{@options.readonlyModifierClass}" if @options.readonly
+          classes.push "#{@options.baseClass}-id-#{@$element.attr("id")}" if @$element.attr "id"
+          classes.join " "
+      @$container = $ "<div>",
+        class: addClasses @options.containerClass
+      @$on = $ "<span>",
+        html: @options.onText,
+        class: "#{addClasses @options.handleOnClass} #{@options.baseClass}-#{@options.onColor}"
+      @$off = $ "<span>",
+        html: @options.offText,
+        class: "#{addClasses @options.handleOffClass} #{@options.baseClass}-#{@options.offColor}"
+      @$label = $ "<label>",
+        for: @$element.attr "id"
+        html: @options.labelText
+        class: addClasses @options.labelClass
 
       # set up events
       @$element.on "init.bootstrapSwitch", => @options.onInit.apply element, arguments