Apply iCheck (jQuery plugin) to dynamically created CheckBoxes

Question

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

With the plugin, I am able to just call $('input').iCheck() to apply the desired look and functionality.

However, I am stuck at calling the .iCheck() function on dynamically created checkboxes.

In an ajax call, I build my checkboxes as follows in the success function; This is in an $.each block but for simplicity purposes, I've only included code within 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 the id of container that already exists in the DOM tree and n is my object returned as JSON

After building the checkboxes and I call $('#container input').iCheck(); obviously I get nothing special but standard checkboxes. I presume it is because the checkboxes are created dynamically and after the .iCheck() is called. But even after I create checkboxes and call .iCheck() the result is the same.

Can anyone guide me on this?

Answer 1

Try this

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