double fire event change if click on label

[valix85]

hi, i write this code and when i click on label text event change is fire two times. if i click on butto or i try to swipe it's work correctly
in chrome work ok, but in FF37 don't work correctly
version of
jquery 1.11.1
bootstrap 3.2.0
bootstrap-switch 3.3.2

how i can resolve it?

<input id="SwitchImageActive" type="checkbox" value="ImageActive" name="ImageActive" data-off-color="danger" data-on-color="success" data-label-width="auto" data-label-text="Image enabled">

$(function(){                        
    $("#SwitchImageActive").bootstrapSwitch();                      
        $("#SwitchImageActive").bootstrapSwitch().on('switchChange.bootstrapSwitch', function (event, state) {
        alert( $(this).prop("checked") );
        //alert( $(this).val() );
        //alert(event);
        // alert(state);
        });
});

[rickdmer]

I'm having this same issue on the Galaxy S3 browser (Android 4.3). It happens on http:https://www.bootstrap-switch.org/ as well.

[LostCrew]

@valix85 if i rewrite your code like following

$(function(){                        
  $("#SwitchImageActive").bootstrapSwitch({
    onSwitchChange: function (event, state) {
      alert($(this).prop("checked"));
    }
  });
});

would it still trigger the problem? can you verify?

[valix85]

i try your code but problem persist, always double alert ONLY if i click in label space, if i click on color button(red or green area) doesn't fire double time.
if i try in chrome it's work correctly but if i try in firefox the event is fired two times, before and after cheange

[jasonetwork]

Having the exact same issue. Clicking on the ON/OFF text will fire the switchChange.bootstrapSwitch event correctly. Although, if I click on the "label" portion of the switch, the event will fire twice. For example, if the switch is on the ON position (true), and you click the label, the event will fire twice, first returning a state of TRUE, and then FALSE. Otherwise, if you click on the ON/OFF text, it will just return a state of FALSE. Having the problem with any version of Firefox and mobile devices.

This is a HUGE problem if you are relying on the state value when the event is fired, not to mention how inefficient it is. If you are using the switch to update a value in a database, it will perform the update twice -- first with the incorrect value.

Any ideas would be greatly appreciated. Was going to use bootstrap switch on a large extranet project, but will cause major issues with the problem described above.

[jasonetwork]

Looks like the issue is related to the "mouseleave" event under the bootrstapSwitch _labelHandlers. When the label portion of the switch is clicked, it triggers the "mouseup" event AS WELL as the "mouseleave" event. Problem is, the "mouseleave" event calls the mouseup event, thus creating a type of loop that causes the switchChange.bootstrapSwitch event to fire twice. Anyways, here's my quick and solution to the problem (until a permanent fix is implemented):

    var BootstrapSwitch;
    BootstrapSwitch = (function() {
      function BootstrapSwitch(element, options) {
        if (options == null) {
          options = {};
        }
        this.$element = $(element);
        this.clckevt = false; // <---- ADD THIS HERE!!!!!
        this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, {
          state: this.$element.is(":checked"),
          size: this.$element.data("size"),

Under _labelHandlers, change "mouseup" to custom "switcher"

"mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) { ... } //Change this
"switcher.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) { ... } //To This

Add "click" to _labelHandlers:

          "click.bootstrapSwitch": (function(_this) { //Added for bug fix
            return function(e) {
              _this.clckevt = true;
              return _this.$label.trigger("switcher.bootstrapSwitch");
            };
          })(this),

Edit "mouseleave" under _labelHandlers:

          "mouseleave.bootstrapSwitch": (function(_this) {
            return function(e) {
              if(!_this.clckevt){ //Added for bug fix.
                return _this.$label.trigger("switcher.bootstrapSwitch");
              }
              _this.clckevt = false;
            };
          })(this)

The above changes creates a "click" event which prevent the "mouseleave" event from firing when the "label" is simply just clicked. The "clckevt" variable resets itself, allowing the slider to function normally when the label is not being clicked. Hopes this helps anybody having the same issue I was having!!!

[WhistlerHusky]

Thanks!

BTW, Is this updated? if so, I want to know which version it is.

[tk421]

@WhistlerHusky this reply might be a bit late, but I am afraid this fix, if applied, has not completely happened.

I have been able to fix this problem by modifying one single line. The project owner might want to evaluate to update the changes. If I have time I will prepare a proper pull request.

[fm0609]

@tk421 do you have a solution in the meanwhile? I am working also with a database and actual devices. Having the problem, that the device is switching ON and OFF by itself and never stops. My workaround at the moment is to limit the accepted inputs with a time delay. So the second input will be disregarded. Does anyone have a propper solution?
Thanks!