JQUERY iCheck插件不适用于动态单选按钮

时间:2014-03-04 09:42:22

标签: jquery asp.net icheck

我遇到了iCheck插件的一个奇怪问题。我的几个领域有单选按钮和复选框。我正在使用iCheck插件来美化它们。除动态复选框和无线电外,一切正常。

当我动态添加几个单选按钮并立即调用iCheck功能时,没有任何事情发生。但是,如果我从firebug调用相同的函数,它的工作和iCheck功能将与无线电相关联。什么是错的。

/* 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);

警报正在执行,所以我相信我的iCheck代码也没关系。但奇怪的是,如果我从firebug执行上述iCheck代码,无线电将与iCheck功能绑定。我不明白这个问题。

另一个奇怪的事情是当我添加另一组无线电时,动态创建的前一组无线电与iCheck绑定,而新设备仍然没有绑定。因此,当添加新集时,前一集与iCheck结合

实际代码

 $('#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
            });

        });

1 个答案:

答案 0 :(得分:2)

AJAX是异步的,使用成功回调:

  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
     });

 }