JQUERY iCheck plugin not working for dynamic radio button

Question

Im facing a strange problem with iCheck plugin. I've few fields with Radio Button and check boxes. I'm using iCheck plugin for beautifying them. Everything works fine except dynamic check boxes and radios.

When I add few radio buttons dynamically and on immediately calling the iCheck function nothing is happening. But if I call the same function from firebug, its working and iCheck feature get associated with the radios. whats wrong with it.

/* Here my code for adding dynamic radios with class red */
$('input[type="checkbox"].red, input[type="radio"].red').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '10%' // optional
});
alert(1);

The alert is executing and so I belive my iCheck code is also fine. But the strange thing is if I execute the above iCheck code from firebug , the radios getting binds with iCheck features. I didnt understand the problem.

Another strange thing is when I add another set of radios, the previous set of radios which were dynamically created being bind with iCheck and the new set is still without binding. So when ever new set added, the previous set being bonded with iCheck

Actual Code

 $('#btn_savefield').click(function () {
            var fID, m, opt, cap;
            fID = $('#<%= dd_fieldtype.ClientID %>').val();
            var fe = $('#hid_fieldedit').val();
            m = $('#cb_mandatoryfield').prop('checked');
            if (m == false) {
                m = 0;
            }
            else {
                m = 1;
            }

            var s = $('#txt_fieldoptions').val();
            opt = s.replace(/\r\n|\r|\n/g, '|');
            cap = $('#txt_fieldcaption').val();

            var tempParam, Param;
            var tempParam = { FieldTypeID: fID, fieldTitle: cap, newoptions: opt, mandatory: m };
            var param = JSON.stringify(tempParam);
            //alert(fID);
            //alert(param);
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: param,
                url: "postjobs.aspx/getFieldType",
                dataType: "json",
                error: function (data) {
                    //alert("error");
                    //alert(data);
                    alert(JSON.stringify(data));
                },
                success: function (data) {
                    var f = data.d;
                    //alert(f);
                    if (data.d != '') {
                        if (parseInt(fe) >= 0) {
                            $('#<%= div_formfields.ClientID %>').find('.form-group:eq(' + fe.toString() + ')').replaceWith(f);
                        }
                        else {

                            $('#<%= div_formfields.ClientID %> hr').before(data.d);
                        }
                    }

                }
            });
            $('#Modal_newfield').modal('hide');
            alert($('input[type="checkbox"].red, input[type="radio"].red').length);
            $('input[type="checkbox"].red, input[type="radio"].red').iCheck({
                checkboxClass: 'icheckbox_minimal-red',
                radioClass: 'iradio_minimal-red',
                increaseArea: '10%' // optional
            });

        });

Answer 1

AJAX is async, use success callback:

  success: function (data) {
     var f = data.d;
     //alert(f);
     if (data.d != '') {
         if (parseInt(fe) >= 0) {
             $('#<%= div_formfields.ClientID %>').find('.form-group:eq(' + fe.toString() + ')').replaceWith(f);
         } else {

             $('#<%= div_formfields.ClientID %> hr').before(data.d);
         }
     }

     alert($('input[type="checkbox"].red, input[type="radio"].red').length);
     $('input[type="checkbox"].red, input[type="radio"].red').iCheck({
         checkboxClass: 'icheckbox_minimal-red',
         radioClass: 'iradio_minimal-red',
         increaseArea: '10%' // optional
     });

 }