Динамически добавленному элементу не удалось отобразить флажок и выбрать тег - PullRequest
Новая
       17

Динамически добавленному элементу не удалось отобразить флажок и выбрать тег

0 голосов
/ 16 сентября 2018

Я добавил строку формы с двумя текстовыми полями и установил флажок.Также создана кнопка добавления с использованием JavaScript, чтобы добавить дополнительную строку.Но он не отображает select и флажок.

Мы используем функцию add_family для добавления новых элементов 

<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>

HTML 

 <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>

Когда я проверил страницу, я обнаружил, что добавленный флажок не загружается <span class="checkbox-material">

Надеюсь, я найду лучшие решения.

...