克隆的输入没有价值 - Combodate

时间:2018-04-16 12:59:53

标签: jquery input clone combodate

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

1 个答案:

答案 0 :(得分:2)

更改了一些内容以使其正常工作但基本上似乎将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();
    });
    
  4. 不起作用,并替换为

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