將元素動態添加到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> 

這裏包括變化的小提琴製作：Fiddle

試試看，讓我知道:)