javascript - 通过 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>$('#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

在没有太多信息的情况下，我的建议是将您的 #inputList 元素放在 .form-group div 之外。

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">
        <input type="button" value="Add Input field" id="addInputs" />
    </div>
</div>

<div id="inputList"></div> <!-- Container for the new appended Form group -->

原因是您将那些 form-group 附加到 col-md-3 元素中，并带有 form-group 父元素。 由于您为那些 form-group 设置了样式，例如填充，它可能会影响附加元素的位置。