jquery - 如何动态添加字段
问题描述
我正在尝试动态添加字段,有两个字段 1. 输入文本 2. 时间,但在尝试动态添加它们时它们不起作用。这是我的代码。
$(document).ready(function() {
var maxField = 5; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div class="row"><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENTS</label><input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div></div><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENT\'S TIME </label><div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" name="firsdayeventtime[]" type="text" class="form-control input-small"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
$('#timepicker1').timepicker({
showInputs: false
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/js/bootstrap-timepicker.min.js"></script>
<div class="field_wrapper">
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label for="exampleInputEmail1">EVENTS</label>
<input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="exampleInputEmail1">EVENT'S TIME</label>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" name="firsdayeventtime[]" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
</div>
<a href="javascript:void(0);" class="add_button" title="Add field"><i class="fas fa-plus-square"></i></a>
</div>
</div>
我只是想动态添加它们两个字段。一个是文本,第二个是时间选择器。他们不能动态添加
解决方案
您的单引号语句中有一个未转义的单引号var fieldHTML
。<div>
在同一行代码和<span>
标签内还有多个空格。--></i > < /span></div > < /div></div >
在该行的末尾。此外,我在您的代码中没有看到删除按钮。
<label for="exampleInputEmail1">EVENT'S TIME</label>
应该用反斜杠转义:
<label for="exampleInputEmail1">EVENT\'S TIME</label>
旁注: 另外,FONT AWESOME 链接不包含在您的代码片段中,我不得不在此处添加文本以查看提交按钮并排除代码故障。
$(document).ready(function() {
var maxField = 5; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div class="row"><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENTS</label><input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div></div><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENT\'S TIME</label><div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" name="firstdayeventtime[]" type="text" class="timepicker1 form-control input-small"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div></div><a href="javascript:void(0);" class="remove_button" title="Remove Field">Remove Me</i></a></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').empty(); //Remove field html
x--; //Decrement field counter
});
});
$('.timepicker1').each(function(e){
$(this).timepicker({
showInputs: false
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/js/bootstrap-timepicker.min.js"></script>
<div class="field_wrapper">
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label for="exampleInputEmail1">EVENTS</label>
<input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="exampleInputEmail1">EVENT'S TIME</label>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" name="firstdayeventtime[]" type="text" class="timepicker1 form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
</div>
<a href="javascript:void(0);" class="add_button" title="Add field">FA NOT INCLUDED</i></a>
</div>
</div>
推荐阅读
- erlang - 我可以在不停止运行应用程序的情况下重新加载单个更改的 Erlang 模块吗?
- c# - 将 JSON 反序列化为 C# 类返回 null
- r - 每个参与者的引导响应
- macos - snowsql PUT 命令
- scala - 如何使用连接池使 Akka HTTP 达到背压?
- sql - 尝试获取 SUM - 无法对包含聚合或子查询的表达式执行聚合函数
- apache-spark - Spark 退出状态 134. 什么意思
- fix-protocol - GTD 订单实际何时到期
- python - Pandas DF.AT 的值错误
- angular - 在 Angular 9 中,如果您在导航链接指向的 URL 上,如何更改导航链接的 HTMl?