javascript - 当用户使用 jquery 不断单击按钮时需要 append html 元素

Question

我试图在单击按钮时多次 append div，问题是仅 append 一次。我需要在用户不断点击时 append 相同的 div。

• 我需要多次追加的 DIV 存储在 jquery 代码中名为 $htmlDivForm 的变量中。
• 我正在使用 Bootstrap 。

HTML 代码:

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <form id="formUser" action="index.html" method="post">
                <div class="text-center">
                    <button id="moreFieldsBtn" class="btn" type="button" name="button">+</button>
                </div>
            </form>
        </div>

        <div class="col-md-9">
            More Content...
        </div>

    </div>
</div>

jquery 代码:

var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");
var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');


//Add input text field
$($moreFieldsBtn).click (function() {
    $($formUser).append($htmlDivForm);
});

Answer 1

I had gone through your question.

I have Updated the example.

Removed the Object and just inserting plain HTML

var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");
var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');

var htmltext = '<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>'


//Add input text field
$($moreFieldsBtn).click (function() {
    $($formUser).append(htmltext);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">

        <div class="col-md-3">
            <form id="formUser" action="index.html" method="post">
                <div class="text-center">
                    <button id="moreFieldsBtn" class="btn" type="button" name="button">+</button>
                </div>
            </form>
        </div>

        <div class="col-md-9">
            More Content...
        </div>
    </div>
</div>

<div>