Switch works on double click

I am using a switch (something like toggle button) to show some data to the users. But the switch only works on double click instead of single.

Below is the code from .js file -

var integrations = {
    init: function() {
      $("input[type='checkbox'].integration").bootstrapSwitch();

      $("input[type='checkbox'].integration").on('switchChange.bootstrapSwitch', function(e, state) {
        $(this).siblings('.bootstrap-switch-label').click();
        var val = $("input[type='checkbox'].integration").val()
        if (val === 'true')
          $(this).prop( "checked", true);
        else
          $(this).prop( "checked", false);
      });

      this.jiraService = w.service.get('jira').init();
      this.jiraService.initEvents();

      if (w.Clipboard) {
        new w.Clipboard(".copy.tooltip-right");
      }
    }
  };

Does anyone know how to make it work for single click? Please help!

CodePudding user response：

Can you check by commenting out below line, it might be possible that label is also making the switch click.

$(this).siblings('.bootstrap-switch-label').click();

CodePudding user response：

If someone is still looking for the solution, try this one -

if ($(this).on(".bootstrap-switch-handle-on bootstrap-switch-success").click())
  $(this).prop( "checked", true);
else
  $(this).prop( "checked", false);

Changing the if condition works for me.