Bootstrap-switch doesn´t event

Question

I have the following html code (working properly changing the state of the checkbox) and I need to run an alert when the state of some checkbox is changed.

<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>

I have tried the following combinations, but I can not execute the routine:

1)

$('.make-switch.input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

2)

$('input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

3)

$('.alert-status').on('switchChange.bootstrapSwitch', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

4)

$('.alert-status').on('switchChange', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

5)

/*$(".alert-status").click(function(event) {
          event.preventDefault();
          event.stopPropagation();
          alert($(this).attr('data-checkbox'));
});*/

I have searched the internet, I have consulted examples, I have used with firebug, and I find no way to capture the event. Can anyone help me?

I found this example and have modified and work in this environment, not on my website:

http://jsfiddle.net/sumw4/13/ (I add probeProbe class and portion of code)

Answer 1

I think your code should be working http://jsfiddle.net/PNU45/

<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>

javascript:

$('.alert-status').bootstrapSwitch('state', true);


$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {

    alert($(this).data('checkbox'));
    //alert(event);
   // alert(state);
});

Answer 2

try this :

get state

$('.alert-status').bootstrapSwitch('state', true);

On change

$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
 if (state) {
    // true
 } else {
    // false
 }
   event.preventDefault();
});