capturing events from input/checkbox

I am using ICheck for customing my checkboxes. I am having trouble registering events from them. I've been using this as a reference for the events that can be triggered.

My checkbox is as follows, where the name is dynamically generated:

<input name=<?php echo getname();?> type="checkbox" />

Here's my jquery for handling events (just for testing):

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

The resulting checkbox on the browser is as follows:

<div class="icheckbox_minimal" aria-checked="false" aria-disabled="false" style="position: relative;">
<input name="QzpceGFtcHBcaHRkb2NzXG1ldHRhXHVzZXJzXGpvaG5kb2VcTWFpbGRpclxuZXdcMTM5ODE3Mzg4Mi5IOTA1NDI4UDEyMjIxLmRlZGk0NC5jcHQyLmhvc3QtaC5uZXQ1M2E3NGNkYzhiMDJk" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
</div>

However, when I check the checkbox -- nothing happens. The checkbox does not respond. I'm relatively new to javascript, what could be the problem?

Solution

Here is how your markup and code should look like for the plugin to work. iCheck has to be initialized before it can be used.

.......
<script src="path-to/jquery"></script>
<script src="path-to/icheck.js"></script>
<script>
    $(function() {
        $('input').iCheck(); //minimum initialization

        $('input').on('ifChecked', function(event){
            alert(event.type + ' callback');
        });
        $('input').on('ifUnchecked', function(event){
            alert(event.type + ' callback');
        });
    });
</script>
</head>
<body>
<div class="icheckbox_minimal" aria-checked="false" aria-disabled="false" style="position: relative;">
<input name="QzpceGFtcHBcaHRkb2NzXG1ldHRhXHVzZXJzXGpvaG5kb2VcTWFpbGRpclxuZXdcMTM5ODE3Mzg4Mi5IOTA1NDI4UDEyMjIxLmRlZGk0NC5jcHQyLmhvc3QtaC5uZXQ1M2E3NGNkYzhiMDJk" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
</div>
.....