附加 div 格式更改时

Question

我目前有以下布局。

        <div class="forminputs">
            <h4 class="mt-2">Ingredients:</h4>
            <div class="mt-2 row">
                <div class="mr-2">
                    <select class="custom-select custom-select-lg" id="measurements">
                        <option selected value="item">Item</option>
                        <option value="tablespoon">Tablespoon</option>
                        <option value="cup">Cup</option>
                    </select>
                </div>
                <div>
                    <input class="form-control-lg" type="text" placeholder="1"  maxlength="4" size="4">
                </div>

                <div class="col">
                    <input id='items' placeholder="Egg" class="form-control form-control-lg" type="text"
                           name="mytext[]">

                </div>

            </div>

        </div>

然后我有一个 javascript 函数，当有人按下按钮时，它会附加相同的 div。这行得通，但样式不一样。

<script>
   $(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".forminputs");

    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div class="mt-2 row"><div class="mr-2"><select class="custom-select custom-select-lg" id="measurements'+ x +'"><option selected value="item">Item</option><option value="tablespoon">Tablespoon</option><option value="cup">Cup</option></select><div><div><input id="quantity'+ x +'" class="form-control-lg" type="text" placeholder="1"  maxlength="4" size="4"></div><div class="col"><input id="items'+ x +'" placeholder="Egg" class="form-control form-control-lg" type="text" name="mytext[]"></div></div><a href="#" class="delete ml-2 float-right">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
    $(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
});

</script>

所以当前的布局是这样的。

但是当我附加项目时，它看起来像这样。

如有任何帮助，我们将不胜感激。

Answer 1

我可以通过像这样将 html 放入模板变量并附加它来修复它

    var crap = `            
         <div class="mt-2 row">
                <div class="mr-2">
                    <select class="custom-select custom-select-lg" id="measurements'+ x'">
                        <option selected value="item">Item</option>
                        <option value="tablespoon">Tablespoon</option>
                        <option value="cup">Cup</option>
                    </select>
                </div>
                <div>
                    <input id="quantity'+ x +'" class="form-control-lg" type="text" placeholder="1"  maxlength="4" size="4">
                </div>

                <div class="col">
                    <input id="items'+'" placeholder="Egg" class="form-control form-control-lg" type="text" name="mytext[]">

           </div>;

注意 ` 而不是 '

附加 div 格式更改时

When appending div formatting changes

javascript

bootstrap-4