Jquery “引导样式不应用于动态”复选框

样品

主要联系人是一个静态元素，当我生成另一个联系人2时，复选框的css会发生变化

这是我用来添加另一个元素的代码

$(document.body).on('click', "#add-user", function (){  
        var counter = $('#counter-user').val();
        counter++;
        $('#user-new').append("<tr data-id='"+ counter +"'><td><div class='row' ><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-12' style='text-align:left;font-size:16px'><b>Contact "+ counter +"</b></label> </div></div><div class='row' ><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>First <span class='required'> * </span> </label> <div class='col-md-8'><div class='input-icon right'><i class='fa'></i><input type='text' class='required caps trim form-control' name='efirst"+ counter +"'/> </div></div></div><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>Last <span class='required'> * </span> </label><div class='col-md-8'><div class='input-icon right'> <i class='fa'></i><input type='text' class='required caps trim form-control' name='elast"+ counter +"'/> </div></div></div><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>Title </label> <div class='col-md-8'><div class='input-icon right'><i class='fa'></i><input type='text' class='form-control caps trim ' name='etitle"+ counter +"'/> </div></div></div></div><div class='row' ><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>Phone </label> <div class='col-md-8'><div class='input-icon right'><i class='fa'></i><input type='text' class='numbers validate-phone form-control trim user-phone mask-phone' name='ephone"+ counter +"'/> </div></div></div><div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Mobile </label><div class='col-md-8'><div class='input-icon right'><i class='fa'></i> <input type='text' class='numbers validate-phone form-control trim user-phone mask-phone' name='emobile"+ counter +"'/> </div> </div> </div> <div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Department </label> <div class='col-md-8'> <div class='input-icon right'> <i class='fa'></i> <input type='text' class='form-control caps trim ' name='edept"+ counter +"'/> </div> </div> </div></div> <div class='row' > <div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Email <span class='required'>*</span> </label> <div class='col-md-8'> <div class='input-icon right'> <i class='fa'></i> <input type='text' class='required validate-email form-control trim' name='eemail"+ counter +"'> </div> </div> </div><div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Fax </label> <div class='col-md-8'> <div class='input-icon right'> <i class='fa'></i> <input type='text' class='numbers validate-phone form-control trim user-phone mask-phone' name='efax"+ counter +"'/> </div> </div> </div> <div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Notification<span class='required'>*</span> </label> <div class='col-md-8'> <div class='form-group col-md-4 col-sm-12' style='margin-right:20px'> <label class='control-label' style='font-size:12px;'>Email </label> <input type='checkbox' class='form-control' name='not-email"+ counter +"' id='eemail' value='yes' data-user-count='"+ counter +"' checked /></div> <div class='form-group col-md-4 col-sm-12' style='margin-right:20px'> <label class='control-label' style='font-size:12px;'>Text </label> <input type='checkbox' class='form-control notif' name='not-text"+ counter +"' id='emobile' value='yes' data-user-count='"+ counter +"'/></div><div class='form-group col-md-4 col-sm-12'> <label class='control-label' style='font-size:12px;'>Fax </label><input type='checkbox' class='form-control notif' name='not-fax"+ counter +"' id='efax'  value='yes' data-user-count='"+ counter +"'/></div></div></div></div></td></tr>");
        $('#counter-user').val(counter);
        $(".user-phone").inputmask("(999) 999-9999");
        $('#remove-user').show();
    });

$（document.body）.on（'click'，“#adduser”，函数（）{
var counter=$（'#counter user'）.val（）；
计数器++；
$（“#用户新”）。附加（“联系人”+柜台+“第一个*最后一个*标题电话移动部门电子邮件*传真通知*电子邮件文本传真”）；
$（“#计数器用户”）.val（计数器）；
$（“.user phone”）.inputmask（“（999）999-9999”）；
$（“#删除用户”）.show（）；
});

您的复选框不应具有“表单控件”类。如果你移除它，它看起来会正常

我不确定您想要哪种样式，但默认情况下，引导复选框与图像第一部分中的复选框不同。它们是灰色的，看起来像普通的复选框：

---

也许您已经应用了自己的样式，但没有应用到新元素中？

不要像那样添加太多html。这是很糟糕的代码。使用。。。please@gerdi如果使用克隆，如何更改克隆元素的id ex:id=“elem1”克隆元素应包含id=“elem2”

$（“#user new”）.clone（）.data（“id”，counter）

。。。这两者的某种结合。。。克隆->查找新tr->查找数据id->更改值。从上面的代码中，您应该在要添加counter@gerdiclone不允许我在关闭复选框后单击该复选框该复选框刚恢复为常规复选框，但样式仍然不同primary contacts复选框具有该类，因此当我附加类似复选框时，它们应该是相同的