为什么多个日期选择器不起作用? [英] Why multiple datepicker not working?

问题描述

我的 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",格式:yyyy-mm-dd"，方向:左"，自动关闭:真，changeYear : 真,changeMonth : 真,年范围:-100:+0"});});

我的完整代码和演示是这样的:https://jsfiddle.net/oscar11/w4zf690v/

当我添加多个并单击输入日期选择器时，日期选择器不起作用

有什么解决方案可以解决我的问题?

非常感谢

解决方案

您可以为日期字段使用一个公共类，并为新克隆的元素初始化日期选择器.

$('body').on('click', '.btn-add-detail', function() {//克隆元素$ele = $('#pax .clone').clone();//将它附加到父级并完成剩下的工作$ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");//获取日期输入并初始化日期选择器$(".pax_dob", $ele).datepicker({dateFormat: "yy-mm-dd",格式:yyyy-mm-dd"，方向:左"，自动关闭:真，更改年份:真实，changeMonth: 真,年范围:-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");//或者只是为附加的初始化$(".pax_dob", $ele).datepicker({dateFormat: "yy-mm-dd",格式:yyyy-mm-dd"，方向:左"，自动关闭:真，更改年份:真实，changeMonth: 真,年范围:-100:+0"});});$("#pax_dob_1").datepicker({dateFormat: "yy-mm-dd",格式:yyyy-mm-dd"，方向:左"，自动关闭:真，更改年份:真实，changeMonth: 真,年范围:-100:+0"});$('body').on('click', '.btn-remove-detail', function() {如果 ($('#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="样式表"/><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>

<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>

<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"><tr><td style="width:160px;"><select class="form-control pax_type not_included required" name="pax_type[]"><option value="">--选择乘客类型--</option><option value="SGL">单个</option><option value="DBL">Double</option><option value="TWN">Twin</option><option value="TRPL">三重</option><option value="QUAD">Quad</option></选择></td><td><select class="form-control pax_title not_included required" name="pax_title[]"><option value="">--选择标题--</option><option value="Mr">Mr.</option><option value="Mrs">Mrs.</option><option value="小姐">小姐.</option></选择></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>删除</button></td></tr></tbody>