How to run onChange in "masked" checkbox

Question

In a template, the following structure is automatically generated and

$(".checkbox-newsletter").change(function() {
  alert('oi');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icheckbox_minimal checked" aria-checked="true" aria-disabled="false" style="position: relative;">
<input type="checkbox" id="checkbox-newsletter-1" class="checkbox-newsletter" name="FinlegadoPessoaContato[ativo_newsletter]" value="1" data-id="1" 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>

I will need to make an AJAX call when the checkbox has changed its status. Conventionally, the event is not activated because the div icheckbox_minimal is who controls the effect of checked.

How I capture the checkbox event?

Answer 1

I had to go through the elements and work with them in the following way:

$('.iCheck-helper' ).click(function() {

    var input = $(this).prev();
    var parent = $(this).parent();

    if(input.hasClass('checkbox-newsletter')){

        var val = (parent.hasClass('checked')) ? 1 : 0;
        var dataId = input.data('id');

        // A mágica aqui
    }

});

@Edit

The plugin used was the icheck, it has some callback functions predefined for the manipulation of events, so it was just call:

$('input').on('ifChanged', function(event){

    // it's magic

});