克隆的输入没有价值 - Combodate

Question

我使用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();
    });

Answer 1

更改了一些内容以使其正常工作但基本上似乎将true传递给.clone()会阻止任何新的处理程序接管旧的处理程序，因此，这是我的假设，对.combodate()的新调用实际上并没有起作用，而是替换了span等旧元素。

更改

1. 将.clone(true)替换为.clone()
2. 删除旧的span代码

3. 由于删除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

＆＃13;
＆＃13;
$('.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;
＆＃13;
＆＃13;