jquery选中元素html的方式渲染layui radio不显示

今天又踩了个坑，解决了layui的radio 切换的时候需要ajax调用接口在下方显示 一排radio 却不显示的问题。

需求：点击定级radio改变类型raio的列表值

 <div class="layui-form-item">
     <label class="layui-form-label"><span style="color:red">*</span>定级：</label>
      <div class="layui-input-block ml150" id="aevel">
          <input type="radio" name="evel" lay-filter="evelFilter" value="1" title="一般" checked/>
          <input type="radio" name="evel" lay-filter="evelFilter" value="2" title="较大"/>
          <input type="radio" name="evel" lay-filter="evelFilter" value="3" title="重大"/>
          <input type="radio" name="evel" lay-filter="evelFilter" value="4" title="特大"/>
      </div>
</div>

<!-- 点击定级raido改变 类型radio的列表值 -->
<div class="layui-form-item">
    <label class="layui-form-label"><span style="color:red">*</span>类型：</label>
    <div class="layui-input-block ml150" id="atype">
       <!-- <input type="radio" name="type" value="1" title="A" checked/>
            <input type="radio" name="type" value="2" title="B/>
            <input type="radio" name="type" value="3" title="C"/>
       -->
    </div>
</div>

//ruleArr是通过ajax获取到的数组对象
layui.use('form',function(){
  var form = layui.form;
  form.on('radio(evelFilter)',function(data){
    ruleArr.forEach(function(rItem){
       if(rItem.id==levelValue){
           var typeHtml = "";
           rItem.childrenList.filter(function(cItem){
              return cItem.type=='2';
           }).forEach(function(tem2){
              var radioItem = '<input type="radio" name="reportType" value="'+tem2.id+'" title="'+tem2.name+'" />';
              typeHtml += radioItem;
           });
           $("#atype").html(typeHtml);
        }
    });              
  });
});

html组合好的字符串已经放入id=”atype“元素的下面了，可radio就是不显示。

观察了好久，发现了：

又准备在html组合的地方加上这些代码，发现加上后，确实显示出来了，但是前面的radio圆形icon不能被选中。

查了 好久，最终解决了，也不用添加上图的layui-form-radio代码，直接在html组合后代码后添加一句 form.render();即可。