Won't trigger function on click - AJAX/CSS

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 ?

Answers:

Answer

Note for pseudo classes in CSS you use the ":" not the "." symbol. So for instance .i-check.hover should be .i-check:hover. Same with the "disabled" and "checked" pseudo classes.

If you are using the iCheck plugin - use the callback methods they suggest.
For instance:

$('input').on('ifClicked', function(event){
   alert(event.type + ' callback');
 });

They also have the callbacks "ifChecked" and "ifUnchecked"

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.