克隆输入没有价值 - 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.

这样的旧元素

变化

将.clone(true)替换为.clone()
删除旧的 span 标签

由于删除了 true 参数，处理程序不会传递给克隆，因此，

$('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。

高

$('.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();
    
  });

.row {
  padding: 20px;
}

#btnAddDate {
  margin-bottom: 10px;
}

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

克隆输入没有价值 - Combodate

Cloned inputs have no value - Combodate

jquery

clone

input

combodate

变化