div에 동적으로 요소를 추가해도 구문 분석되지 않습니다.

Question

페이지가로드 될 때 페이지에 올바른 스타일로 배치되는 스타일이 추가 된 여러 하위 div 또는 패널이있는 div가 있습니다. 새 패널을 추가하는 버튼이 있지만 패널에 필요한 스타일이 추가되지 않습니다. (이 메소드는 jQuery insertAfter 함수입니다.) Syrena Admin 템플릿을 사용하고 있으므로 요소를 다시 구문 분석하기 위해 호출 할 함수를 알지 못합니다. 페이지가 다시로드되는 것처럼 div를 다시로드하는 방법이 있습니까? 즉, 페이지의 일부만 다시로드하는 방법이 있습니까?

는 HTML

<div class="magic-layout isotope"> 
    <div id="panel2" class="panel panel-default magic-element isotope-item"> 
     <div class="panel-heading"> 
      <span class="panel-title">Additional</span> 
     </div> 
     <div class="panel-body"> 
      <div class="form-group"> 
       <input type="text" name="role[]" placeholder="Role" class="form-control" display="text" /> 
       <input type="text" name="first_name[]" placeholder="First Name" class="form-control" display="text"/> 

       <input type="text" name="last_name[]" placeholder="Last Name" class="form-control" display="text"/> 
       <input type="text" name="phone[]" placeholder="Phone Number" class="form-control" display="text" /> 
      </div> 
      <div class="form-group"> 
       <input type="text" name="address_line_1[]" placeholder="Address Line 1" class="form-control" display="text"/> 
       <input type="text" name="address_line_2[]" placeholder="Address Line 2" class="form-control" display="text" value=""/> 
       <input type="text" name="line_3[]" placeholder="City, State Zip" class="form-control" display="text"/> 
       <input type="hidden" name="contact_id[]" value=""> 
      </div> 
     </div> 
    </div> 

    <additional></additional> 
    <div id="panel2" class="panel panel-default magic-element isotope-item"> 
     <div class="panel-heading"> 
      <button type="button" class="btn btn-info btn-block" onclick="addRow(this.form)">Add</button> 
     </div> 
    </div> 
</div> 

JS는

var rowNum = 0; 
function addRow(frm) { 
    rowNum++; 
    var row = '<div id="panel2" class="panel panel-default magic-element isotope-item"><div class="panel-heading"><span class="panel-title">Additional</span></div><div class="panel-body"><div class="form-group"><input type="text" name="role[]" placeholder="Role" class="form-control" display="text" /> <input type="text" name="first_name[]" placeholder="First Name" class="form-control" display="text"/><input type="text" name="last_name[]" placeholder="Last Name" class="form-control" display="text"/><input type="text" name="phone[]" placeholder="Phone Number" class="form-control" display="text" /></div><div class="form-group"><input type="text" name="address_line_1[]" placeholder="Address Line 1" class="form-control" display="text"/><input type="text" name="address_line_2[]" placeholder="Address Line 2" class="form-control" display="text" value=""/><input type="text" name="line_3[]" placeholder="City, State Zip" class="form-control" display="text"/><input type="hidden" name="contact_id[]" value=""></div></div></div>'; 
    $(row).insertAfter('additional'); 
} 

Answer 1

나는 당신의 버튼의 클릭 이벤트가 올바르게 기능 addRow에 바인딩되지 않았다 생각합니다.

대신 onclick="addRow(this.form)"에서 이벤트를 바인딩 대신에 다음과 같이 클릭 이벤트를 만들어보십시오 :

$(function() { 
    $("#mybutton").click(function() { 
     addRow($(this)); 
    }); 
}); 

을 mybutton가 어디 추가 버튼 :

<button type="button" class="btn btn-info btn-block" id="mybutton">Add</button> 

다음은 변경 사항을 포함 바이올린입니다 made : Fiddle

시도해보고 알려주세요. :)