Apply iCheck (jQuery plugin) to dynamically generated CheckBoxes

Question

I use the fantastic iCheck plugin to style my checkboxes in my form.

With the plugin, I can simply call $('input').iCheck() to apply the desired look and feel.

However, I got stuck when calling the .iCheck() function on dynamically generated checkboxes.

In an ajax call, I create my flags as follows in a success function; This is in the $.each block, but for simplicity I only included the code inside the statement.

 var chk = $('<div><input id="' + n.ID + '" type="checkbox" name="lblChk"><label for="' + n.ID + '">' + n.Title + '</label></div>'); el.append(chk); 

Where el is a div with container identifier that already exists in the DOM tree, and n is my object returned as JSON

After creating the checkboxes, I call $('#container input').iCheck(); , obviously, I don’t have any special, but standard checkboxes. I suppose this is because checkboxes are created dynamically even after .iCheck() called. But even after creating the .iCheck() and calling .iCheck() result will be the same.

Can someone help me with this?

Answer 1

try it

 $('#container').iCheck({checkboxClass: 'icheckbox_flat-green',radioClass: 'iradio_flat-green'}); 

Answer 2

Try it...

 $('#container').find('input').iCheck(); 

Have you tried checking the length of $('#container input') ? I'm not sure, but the input is not a direct child of the container , so it cannot be found using the $('#container input') selector.

Answer 3

There is also another situation ... when iCheck has callbacks

This code will not work for inputs loaded by ajax, as this is a replacement for bind ():

 $('#mycheckbox').on('ifChecked', function(event) { alert(); }); 

Instead, use delegated events:

 $(document).on('ifChecked', '#mycheckbox', function(event) { alert('done'); }); 

Answer 4

Well, I had a similar problem once and solved it like this:

Assuming the variable el is a jQuery element, I will bind the initialization of the iCheck plugin to a full load of el , therefore:

This code should be posted after adding AJAX data.

 el.ready(function() { $('#container input').iCheck({ checkboxClass: 'icheckbox_flat-green', radioClass: 'iradio_flat-green' // If you are not using radio don't need this one. }); }); 

Remember to adapt the code to your HTML structure. Running the above code immediately after adding elements to the page that you initialize iCheck from these newly added elements, however, if you use iCheck callbacks, the plugin will work only if you correctly declare these callbacks, delegating events to the appropriate tags, like Florin .

This code should be placed in the first iCheck initialization

 $(document).on('ifChecked', '#mycheckbox', function() { $(this).addClass('selected'); }); $(document).on('ifUnchecked', '#mycheckbox', function() { $(this).removeClass('selected'); }); 

Answer 5

Try the following:

 $('input').iCheck({ checkboxClass: 'icheckbox_flat-blue', radioClass: 'iradio_flat-blue' }); 

if you want to install from a specific div try this:

 $('#MyDivId input').iCheck({ checkboxClass: 'icheckbox_flat-blue', radioClass: 'iradio_flat-blue' }); 

Check the documentation at http://icheck.fronteed.com/

Answer 6

I ran into the same problem and the solution is simple: call the iCheck method.

 var id = some_id; var one_row = "<tr><td>...<td><td><input type=\"radio\" class=\"minimal\" id=\"" + id + "\" name=\"" + id + "\">radio1</td></tr>"; // add this row to HTML // call the initialize method $('#'+id).iCheck({radioClass: 'iradio_minimal-blue'});