我的 Javascript 代码是这样的:
var j = 1;
$('body').on('click', '.btn-add-detail', function(){
$('#pax_dob_2').attr('id','pax_dob_' + j);
$('#pax .clone').clone().appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
$("#pax_dob" + j).datepicker({
dateFormat: "yy-mm-dd",
format: "yyyy-mm-dd",
orientation: "left",
autoclose: true,
changeYear : true,
changeMonth : true,
yearRange: "-100:+0"
});
});
我的完整代码和演示是这样的:https://jsfiddle.net/oscar11/w4zf690v/
当我添加多个并单击输入日期选择器时，日期选择器不工作
有什么办法可以解决我的问题吗？
非常感谢
最佳答案
您可以为日期字段使用通用类，并为新克隆的元素初始化日期选择器。
$('body').on('click', '.btn-add-detail', function() {
// clone the element
$ele = $('#pax .clone').clone();
// append it to parent and do the rest
$ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
// get the date input and initialize the datepicker
$(".pax_dob", $ele).datepicker({
dateFormat: "yy-mm-dd",
format: "yyyy-mm-dd",
orientation: "left",
autoclose: true,
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
});
$('body').on('click', '.btn-add-detail', function() {
$ele = $('#pax .clone').clone();
$ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
// or just initialize for the appended
$(".pax_dob", $ele).datepicker({
dateFormat: "yy-mm-dd",
format: "yyyy-mm-dd",
orientation: "left",
autoclose: true,
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
});
$("#pax_dob_1").datepicker({
dateFormat: "yy-mm-dd",
format: "yyyy-mm-dd",
orientation: "left",
autoclose: true,
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
$('body').on('click', '.btn-remove-detail', function() {
if ($('#pax div.row').length > 2) {
$(this).parent().parent().parent().parent().parent().parent().remove();
}
});<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-10">
<label class="control-label"><strong>Pax</strong>
</label>
</div>
<div class="col-sm-2">
<label class="control-label">Add Pax</label>
<button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div id="pax">
<div class="row margin-top-10 clone hidden">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td style="width:160px;">
<select class="form-control pax_type not_included required" name="pax_type[]">
<option value="">--Select Type Passenger--</option>
<option value="SGL">Single</option>
<option value="DBL">Double</option>
<option value="TWN">Twin</option>
<option value="TRPL">Triple</option>
<option value="QUAD">Quad</option>
</select>
</td>
<td>
<select class="form-control pax_title not_included required" name="pax_title[]">
<option value="">--Select Title--</option>
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Miss">Miss.</option>
</select>
</td>
<td>
<input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
</td>
<td>
<input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
</td>
<td>
<input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
</td>
<td>
<button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Type Passenger</th>
<th>Title</th>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control pax_type required" name="pax_type[]">
<option value="">--Select Type Passenger--</option>
<option value="SGL">Single</option>
<option value="DBL">Double</option>
<option value="TWN">Twin</option>
<option value="TRPL">Triple</option>
<option value="QUAD">Quad</option>
</select>
</td>
<td>
<select class="form-control pax_title required" name="pax_title[]">
<option value="">--Select Title--</option>
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Miss">Miss.</option>
</select>
</td>
<td>
<input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
</td>
<td>
<input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
</td>
<td>
<input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>或者与链接方法相同。
$('body').on('click', '.btn-add-detail', function() {
$('#pax .clone')
.clone()
.appendTo('#pax')
.removeClass('hidden clone')
.find(".not_included")
.removeClass("not_included")
.end()
.find(".pax_dob").datepicker({
dateFormat: "yy-mm-dd",
format: "yyyy-mm-dd",
orientation: "left",
autoclose: true,
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
});
$('body').on('click', '.btn-add-detail', function() {
$('#pax .clone')
.clone()
.appendTo('#pax')
.removeClass('hidden clone')
.find(".not_included")
.removeClass("not_included")
.end()
.find(".pax_dob").datepicker({
dateFormat: "yy-mm-dd",
format: "yyyy-mm-dd",
orientation: "left",
autoclose: true,
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
});
$("#pax_dob_1").datepicker({
dateFormat: "yy-mm-dd",
format: "yyyy-mm-dd",
orientation: "left",
autoclose: true,
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
$('body').on('click', '.btn-remove-detail', function() {
if ($('#pax div.row').length > 2) {
$(this).parent().parent().parent().parent().parent().parent().remove();
}
});<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-10">
<label class="control-label"><strong>Pax</strong>
</label>
</div>
<div class="col-sm-2">
<label class="control-label">Add Pax</label>
<button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div id="pax">
<div class="row margin-top-10 clone hidden">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td style="width:160px;">
<select class="form-control pax_type not_included required" name="pax_type[]">
<option value="">--Select Type Passenger--</option>
<option value="SGL">Single</option>
<option value="DBL">Double</option>
<option value="TWN">Twin</option>
<option value="TRPL">Triple</option>
<option value="QUAD">Quad</option>
</select>
</td>
<td>
<select class="form-control pax_title not_included required" name="pax_title[]">
<option value="">--Select Title--</option>
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Miss">Miss.</option>
</select>
</td>
<td>
<input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
</td>
<td>
<input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
</td>
<td>
<input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
</td>
<td>
<button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Type Passenger</th>
<th>Title</th>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control pax_type required" name="pax_type[]">
<option value="">--Select Type Passenger--</option>
<option value="SGL">Single</option>
<option value="DBL">Double</option>
<option value="TWN">Twin</option>
<option value="TRPL">Triple</option>
<option value="QUAD">Quad</option>
</select>
</td>
<td>
<select class="form-control pax_title required" name="pax_title[]">
<option value="">--Select Title--</option>
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Miss">Miss.</option>
</select>
</td>
<td>
<input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
</td>
<td>
<input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
</td>
<td>
<input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>关于javascript - 为什么多个日期选择器不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39652796/