通过jquery定位创建的元素

Question

我有一个下拉列表，并且有一个添加输入框按钮，按下时复制下拉列表。但是当它复制时它的位置会改变但是我想在下面的类似模式中的位置是代码而我正在使用模板这样没有太多关于CSS的信息

CSS

.collapsing .navbar-form .form-group,
.collapse.in .navbar-form .form-group {
    margin-bottom: 0;
}
.form-bordered .form-group {
    margin: 0;
    border: none;
    padding: 15px;
    border-bottom: 1px dashed #eaedf1;
}
.form-bordered .form-group.form-actions {
    background-color: #f9fafc;
    border-bottom: none;
}
.form-horizontal.form-bordered .form-group {
    padding-left: 0;
    padding-right: 0;
}
.form-bordered .form-group {
    padding-left: 20px;
    padding-right: 20px;
}
.form-horizontal.form-bordered .form-group {
    padding-left: 5px;
    padding-right: 5px;
}

HTML

<div class="form-group">
    <label class="col-md-3 control-label" for="val_skill">ID Proof</label>
    <div class="col-md-3">
        <select id="val_skill" name="ID_Proof[]" class="form-control">
            <option value="">Please select</option>
            <option value="Pan Card">Pan Card</option>
            <option value="Passport">Passport</option>
            <option value="Voter ID Card">Voter ID Card</option>
            <option value="Driving License">Driving License</option>
            <option value="Defence ID">Defence ID</option>
            <option value="Employee ID Card(issued by govt.)">Employee ID Card(issued by govt.)</option>
        </select>
    </div>
</div>
<div class="form-group">
    <label class="col-md-3 control-label"></label>
    <div class="col-md-3">
        <div id="inputList"></div>
        <input type="button" value="Add Input field" id="addInputs" />
    </div>
</div>

SCRIPT

<script>$('#addInputs').click(function () {
    var zzz = '<div class="form-group"><label class="col-md-0 control-label" for="val_skill">ID Proof</label><div class="col-md-12"><select id="val_skill" name="ID_Proof[]" class="form-control"><option value="">Please select</option><option value="Pan Card">Pan Card</option><option value="Passport">Passport</option><option value="Voter ID Card">Voter ID Card</option><option value="Driving License">Driving License</option><option value="Defence ID">Defence ID</option><option value="Employee ID Card(issued by govt.)">Employee ID Card(issued by govt.)</option></select></div></div>';
    $('#inputList').append(zzz);
});</script>

下面是图片，您可以看到当我点击添加输入按钮时，ID Proof下拉列表未正确对齐

Answer 1

如果没有太多信息，我建议您将.form-group元素放在<div class="form-group"> <label class="col-md-3 control-label" for="val_skill">ID Proof</label> <div class="col-md-3"> <select id="val_skill" name="ID_Proof[]" class="form-control"> <option value="">Please select</option> <option value="Pan Card">Pan Card</option> <option value="Passport">Passport</option> <option value="Voter ID Card">Voter ID Card</option> <option value="Driving License">Driving License</option> <option value="Defence ID">Defence ID</option> <option value="Employee ID Card(issued by govt.)">Employee ID Card(issued by govt.)</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label"></label> <div class="col-md-3"> <input type="button" value="Add Input field" id="addInputs" /> </div> </div> <div id="inputList"></div> <!-- Container for the new appended Form group --> div之外。

Html代码应如下所示：

form-group

原因是您在col-md-3元素中添加了form-group个form-group个父项。 由于您为那些if()设置了样式，例如填充，它可能会影响附加元素的位置。