How to run onChange in checkbox "masquerading"

1

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><divclass="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 its status changed. In a conventional way, the event is not activated because the% wrapper% is who controls the% wrap effect.

How do I capture the checkbox event?

    
asked by anonymous 03.05.2016 / 21:04

1 answer

0

I had to go through the elements and work with them as follows:

$('.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 icheck , it has some predefined callback functions for event handling, so it was just call:

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

    // it's magic

});
    
04.05.2016 / 18:35