如何在单击按钮时添加特定设计的 html 形式的文本框
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).appendTo('<div class="fields_wrap">'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<!-- begin snippet: js hide: false console: true babel: false --><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" />
<link href="assets/css/consolidation.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title></title>
</head>
<div class="fields_wrap row">
<div class="col-xs-3 col-lg-2 col-md-2">
<div class="new-input-label-a">
SELECT bankname
</div>
</div>
<div id='dropdown' class="txt-input-dropdown col-xs-2 col-lg-2">
<select class="form-control" id="Select1" name="dropdown">
</select>
</div>
<div class="col-xs-3 col-md-2 col-lg-2">
<div class="new-input-label">
FOLIO NUMBERS
</div>
</div>
<div class="txt-input col-xs-4 col-md-3 col-lg-3">
<textarea class="textarea form-control" rows="5" id="fno"></textarea>
</div>
<div class="add" id="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></div>
<div class="row">
<div class="input_fields_wrap">
</div>
</div>我在一个带有类 fields_wrap 的 div 中有文本框和文本区域，它们以 html 形式设计。
每当我点击 addbutton 然后添加类 fieldswrap，它在 div input_fields_wrap 中有文本框和文本区域。
但是每当单击添加按钮时，我都无法在 div 中添加特定设计的 html 形式的 div。
最佳答案
第一眼我发现你的代码有3个问题
- 第一个 div
<div class="fields_wrap row">没有关闭</div - add_button 和 wrapper 已经是 jquery 对象，但在事件中你再次将它们打包在 $
$(add_button).click(function(e) {中.我不知道这是否是 jquery 中的错误语法，因为我从未尝试过 :) - 最重要的是:您的代码没有添加多个框，即
< max_fields.您实际上是在一次又一次地添加一个框。要添加多个框，您必须创建一个类input_fields_wrap的隐藏框并使用.clone().show().appendTo('<div class="fields_wrap">').
关于javascript - 如何在单击按钮时添加特定设计的 html 形式的文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43317604/