动态添加的元素无法显示复选框并选择标签

Question

我添加了一个带有两个文本字段的表单行，并选择和复选框。还使用JavaScript创建了添加按钮以添加额外的行。但是它无法显示选择和复选框。

我们使用函数add_family添加新元素

tabulate

HTML

<div class="col col-lg-1 col-md-1 col-sm-12 col-12">
<input type="button" id="more_fields" class="btn btn-primary btn-sm " 
onclick="add_family();" value="Add" /></div>

脚本看起来像这样     

 <div id="morefamily">
 <div>
  <div class="row">
   <div class="col col-lg-2 col-md-2 col-sm-12 col-12">
      <label class="control-label">Relation</label>
     <div class="form-group label-floating is-select">

      <select name="relation[]" class="selectpicker form-control">
       <option value="spouse">Spouse</option>
        <option value="son">Son</option>
         <option value="daughter">Daughter</option>
          <option value="brother">Brother</option>
           <option value="sister">Sister</option>
            <option value="others">Others</option>
             </select>
              </div>
                            </div>
                            <div class="col col-lg-3 col-md-3 col-sm-12 col-12">
                            <label class="control-label">Name</label>
                                <input name="relName[]" class="form-control" placeholder="" type="text">
                            </div>
                            <div class="col col-lg-2 col-md-2 col-sm-12 col-12">
                            <label class="control-label">Age</label>
                                <input name="relAge[]" class="form-control" placeholder="" type="text">
                            </div>
                            <div class="col col-lg-3 col-md-3 col-sm-12 col-12">
                            <label class="control-label">Occupation</label>
                                <input name="relOcptn[]" class="form-control" placeholder="" type="text">
                            </div>
                            <div class="col col-lg-2 col-md-2 col-sm-12 col-12">
                                <div class="switcher-block">

                                <div class="checkbox">
                                <label>
                                <input name="staff[]" type="checkbox" value="1">
                                Staff
                                </label>
                                </div>
                                </div>
                            </div>

   ';     function add_family() { fam++; var obj = document.getElementById('morefamily'); var divfam = document.createElement("div"); divfam.innerHTML = '<div class="row"><div class="col col-lg-2 col-md-2 col- sm-12 col-12"><label class="control-label">Relation</label><div class="form- group label-floating is-select"><select name="relation[]" class="selectpicker form-control"><option value="spouse">Spouse</option> <option value="son">Son</option><option value="daughter">Daughter</option><option value="brother">Brother</option><option value="sister">Sister</option> <option value="others">Others</option></select></div></div><div class="col col-lg-3 col-md-3 col-sm-12 col-12"><label class="control- label">Name</label><input name="relName[]" class="form-control" placeholder="" type="text"></div><div class="col col-lg-2 col-md-2 col-sm-12 col-12"><label class="control-label">Age</label><input name="relAge[]" class="form-control" placeholder="" type="text"></div><div class="col col- lg-3 col-md-3 col-sm-12 col-12"><label class="control- label">Occupation</label><input name="relOcptn[]" class="form-control" placeholder="" type="text"></div><div class="col col-lg-2 col-md-2 col-sm-12 col-12"><div class="switcher-block"><div class="checkbox"><label><input name="mmstaff[]" type="checkbox" value="1">Staff</label></div> </div>     componentHandler.upgradeElements(divfam);     }     obj.appendChild(divfam);

检查页面时，我发现添加的复选框无法加载</script>

希望我会得到最好的解决方案。