我使用Combodate分解输入以便更轻松地输入时间。我也允许多次输入。问题是,克隆的输入没有收到价值。
Combodate似乎正在初始化,但显然无法正常工作,可以在此处查看:https://jsfiddle.net/klav/xpvt214o/133229/
HTML
<button class="btn" id="btnAddDate">Add Time</button>
<div id="dateinfo1" class="clonedInput1 dashboard-item-frame">
<button class="btn toggle pull-right">Show Input</button>
<input type="text" style="display: block;"
data-format="h:mm A" data-template="h : mm A" class="start_time
combotime" name="start_time[0]" value="">
</div>
jQuery
$('.combotime').combodate();
$('#btnAddDate').click(function (e) {
e.preventDefault();
var num = $('.clonedInput1').length,
newNum = new Number(num + 1),
newElem = $('#dateinfo' + num)
.clone(true)
.attr('id', 'dateinfo' + newNum)
.fadeIn('slow');
newNumLess = newNum - 1;
// Clear inputs
newElem.find('input:text').val("").end();
newElem.find('.start_time')
.removeClass('combotime')
.addClass('combotime').combodate();
newElem.find('.start_time')
.attr('name', 'start_time[' + newNumLess + ']')
.val([]);
$('#dateinfo' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
});
答案 0 :(得分:2)
更改了一些内容以使其正常工作但基本上似乎将true
传递给.clone()
会阻止任何新的处理程序接管旧的处理程序,因此,这是我的假设,对.combodate()
的新调用实际上并没有起作用,而是替换了span
等旧元素。
.clone(true)
替换为.clone()
span
代码由于删除true
param,处理程序不会传递给克隆,所以,
$('button.toggle').click(function(){
$(this).parent().find('input').toggle();
$(this).parent().find('.combodate').toggle();
});
不起作用,并替换为
//the important part here is the use of $(document).on()
//instead of $('button.toggle').click().
//using `.siblings()` is just some minor optimizing
$(document).on('click', 'button.toggle', function(){
$(this).siblings('input, .combodate').toggle();
});
以便将.click()
处理程序应用于任何新添加的button.toggle
。
HIH
$('.combotime').combodate();
$('#btnAddDate').click(function (e) {
e.preventDefault();
var num = $('.clonedInput1').length,
newNum = new Number(num + 1),
newElem = $('#dateinfo' + num).clone(/*removed true*/).attr('id', 'dateinfo' + newNum).fadeIn('slow');
//remove old span
newElem.children('span').remove();
newNumLess = newNum - 1;
//re-run .combodate()
newElem.find('.start_time').val("").combodate();
$('#dateinfo' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
});
//fix consequence of removing true param
$(document).on('click', 'button.toggle', function(){
//$(this).parent().find('input, .combodate').toggle();
$(this).siblings('input, .combodate').toggle();
});
&#13;
.row {
padding: 20px;
}
#btnAddDate {
margin-bottom: 10px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://smartsitterville.smartsitting.com/admin/dist/js/combodate.js"></script>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<button class="btn" id="btnAddDate">
Add Time
</button>
<div id="dateinfo1" class="clonedInput1 dashboard-item-frame">
<button class="btn toggle pull-right">Show Input</button>
<input type="text" style="display: block;" data-format="h:mm A" data-template="h : mm A" class="start_time combotime" name="start_time[0]" value="">
</div>
</div>
</div>
&#13;