fixed external label event conflict #359

dist/js/bootstrap-switch.js

@@ -89,7 +89,7 @@
           html: this.options.offText,
           "class": "" + this.options.baseClass + "-handle-off " + this.options.baseClass + "-" + this.options.offColor
         });
-        this.$label = $("<label>", {
+        this.$label = $("<span>", {
           html: this.options.labelText,
           "class": "" + this.options.baseClass + "-label"
         });
@@ -121,6 +121,7 @@
         this._handleHandlers();
         this._labelHandlers();
         this._formHandler();
+        this._externalLabelHandler();
         this.$element.trigger("init.bootstrapSwitch");
       }
 
@@ -594,6 +595,20 @@
         });
       };
 
+      BootstrapSwitch.prototype._externalLabelHandler = function() {
+        var $externalLabel;
+        $externalLabel = this.$element.closest("label");
+        return $externalLabel.on("click", (function(_this) {
+          return function(event) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (event.target === $externalLabel[0]) {
+              return _this.toggleState();
+            }
+          };
+        })(this));
+      };
+
       BootstrapSwitch.prototype._formHandler = function() {
         var $form;
         $form = this.$element.closest("form");

docs/js/main.js

@@ -31,9 +31,6 @@ $(function() {
   .not('#create-switch')
   .not('#events-switch')
   .not('#switch-modal')
-  .one('switchChange.bootstrapSwitch', function(event, state) {
-    console.log(arguments);
-  })
   .bootstrapSwitch();
 
   $('[data-get]').on("click", function() {

src/coffee/bootstrap-switch.coffee

@@ -43,7 +43,7 @@ do ($ = window.jQuery, window) ->
       @$off = $ "<span>",
         html: @options.offText,
         class: "#{@options.baseClass}-handle-off #{@options.baseClass}-#{@options.offColor}"
-      @$label = $ "<label>",
+      @$label = $ "<span>",
         html: @options.labelText
         class: "#{@options.baseClass}-label"
 
@@ -76,6 +76,7 @@ do ($ = window.jQuery, window) ->
       @_handleHandlers()
       @_labelHandlers()
       @_formHandler()
+      @_externalLabelHandler()
 
       @$element.trigger "init.bootstrapSwitch"
 
@@ -363,6 +364,7 @@ do ($ = window.jQuery, window) ->
           e.stopImmediatePropagation()
 
           state = @$element.is ":checked"
+
           @_containerPosition state
           return  if state is @options.state
 
@@ -450,6 +452,16 @@ do ($ = window.jQuery, window) ->
         "mouseleave.bootstrapSwitch": (e) =>
           @$label.trigger "mouseup.bootstrapSwitch"
 
+    _externalLabelHandler: ->
+      $externalLabel = @$element.closest("label")
+
+      $externalLabel.on "click", (event) =>
+        event.preventDefault()
+        event.stopImmediatePropagation()
+
+        # reimplement toggle state on external label only if it is not the target
+        @toggleState()  if event.target is $externalLabel[0]
+
     _formHandler: ->
       $form = @$element.closest "form"
 

test/bootstrap-switch.js

@@ -89,7 +89,7 @@
           html: this.options.offText,
           "class": "" + this.options.baseClass + "-handle-off " + this.options.baseClass + "-" + this.options.offColor
         });
-        this.$label = $("<label>", {
+        this.$label = $("<span>", {
           html: this.options.labelText,
           "class": "" + this.options.baseClass + "-label"
         });
@@ -121,6 +121,7 @@
         this._handleHandlers();
         this._labelHandlers();
         this._formHandler();
+        this._externalLabelHandler();
         this.$element.trigger("init.bootstrapSwitch");
       }
 
@@ -594,6 +595,20 @@
         });
       };
 
+      BootstrapSwitch.prototype._externalLabelHandler = function() {
+        var $externalLabel;
+        $externalLabel = this.$element.closest("label");
+        return $externalLabel.on("click", (function(_this) {
+          return function(event) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (event.target === $externalLabel[0]) {
+              return _this.toggleState();
+            }
+          };
+        })(this));
+      };
+
       BootstrapSwitch.prototype._formHandler = function() {
         var $form;
         $form = this.$element.closest("form");