Won't trigger function on click - AJAX/CSS

Question

I'm trying to trigger jQuery function on click in one of my inputs.

The simple example is like this:

jQuery:

<script>
$('.i-check').click(function(){
alert("The class was clicked.");
});
</script>

The Input

<div class="checkbox">
  <label>
    <input class="i-check" type="checkbox" name="all-inclusive" value="6"/>All-inclusive</label>
</div>

The CSS

.i-check,
.i-radio {
  display: inline-block;
  *display: inlne;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  cursor: pointer;
  top: 1px;
  left: -7px;
  margin-left: -13px;
  float: left;
  text-align: center;
  line-height: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}
.i-check:before,
.i-radio:before {
  content: '\f00c';
  font-family: 'FontAwesome';
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translate3d(0, -25px, 0);
  -moz-transform: translate3d(0, -25px, 0);
  -o-transform: translate3d(0, -25px, 0);
  -ms-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0);
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  color: #fff;
  font-size: 14px;
}
.i-check.hover,
.i-radio.hover {
  border: 1px solid #ed8323;
}
.i-check.checked,
.i-radio.checked {
  border: 1px solid #ed8323;
  background: #ed8323;
}
.i-check.checked:before,
.i-radio.checked:before {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.i-check.disabled,
.i-radio.disabled {
  border-color: #d9d9d9 !important;
}
.i-check.disabled.checked,
.i-radio.disabled.checked {
  background: #ccc !important;
}
.i-check.i-check-stroke.checked {
  background: #fff;
}
.i-check.i-check-stroke.checked:before {
  color: #ed8323;
}

If I change the css class name to something other then i-check - and then run it, it works. So I know it has something to do with my CSS I just can't figure out what ?

Answer 1

Using the api, works perfect. For other using this plugin, on checked state this should do it for you.

<script>
        $('.i-check input').on('ifChecked', function(event){
            alert('function started');
});
</script>

One thing to mention here is that whenever placing this code be sure to place it correctly according to other jQuery scripts! Place the code at the very bottom of all script calls, to be sure that is not the reason for it not working.