我试图在单击按钮时多次 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);
});
最佳答案
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>
关于javascript - 当用户使用 jquery 不断单击按钮时需要 append html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40338858/