jquery - 动态添加元素到 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

我认为您按钮的点击事件未正确绑定(bind)到您的函数 addRow。

不要从 onclick="addRow(this.form)" 绑定(bind)事件，而是尝试按如下方式创建点击事件:

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

mybutton 是您的添加 按钮:

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

这是一个 fiddle ，包括所做的更改:Fiddle

试一试，让我知道:)