当用户不断点击带有 jquery 的按钮时，需要附加 html 元素答案

【问题标题】：Need to append html element as user keep clicking a button with jquery当用户不断点击带有 jquery 的按钮时，需要附加 html 元素
【发布时间】：2017-03-13 08:09:44
【问题描述】：

我在单击按钮时尝试多次附加 div，问题是只附加一次。我需要在用户不断点击时附加相同的 div。

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

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);
});

【问题讨论】：

只需删除变量 $htmlDivForm $('
@Daniel

标签： javascript jquery html css append

【解决方案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>

【讨论】：

试试上面的 js fiddle
请正确格式化您的答案，并在答案中包含代码。
我在 jsfiddle 上尝试了你的代码，它可以工作！不幸的是，在我的项目中仍然无法正常工作。你能看看吗？ github.com/danielbettech/Machotez 谢谢！
告诉我页面名称。以便我查看。
它的 prueba1.html 和 app.js 谢谢！

【解决方案2】：

您不能多次附加同一个 div，您需要实例化新的 div 并附加它们。您也不需要重新包装 jQuery 对象来附加处理程序：

var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");

//Add input text field
$moreFieldsBtn.click(function() {
    var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');
    $formUser.append($htmlDivForm);
});

【讨论】：