问题与页面中的多个日期选择器

Question

我在我的页面中使用引导日期选择器。

我使用这种形式有多个日期选择器动态生成。

现在的情况是，当你点击第一输入元件和选择日期，那么它的工作原理为输入字段，

现在添加一个元素，然后单击该输入字段。日期选择器不能正确初始化。

它工作正常，如果你第一次添加元素，并单击输入..

这是我到目前为止已经试过..

$(function() { 
    var addMilIterator = 0; 
    $(document).on('click', '[data-ele="addMil"]', function(e) { 
    var clone = $('.milestones-form').first().clone(true); 

    $(clone).find('[name]').each(function() { 
     var name = $(this).attr('name'); 
     $(this).val(""); 
     $(this).attr('name', name + '_' + addMilIterator); 
    }); 
    addMilIterator++; 
    $('.milestones-form').last().after(clone); 
    }); 
    $(document).on('focus', '[name^="date"]', function() { 
    $(this).datepicker({ 

    }) 
    }); 
}); 

我创建如果一个小提琴它有助于。任何提示都可以。 Link to fiddle

请不要因为编辑不好而给出否定的评论。谢谢大家...

Answer 1

你必须确保你克隆你的输入正确。 clone(false)

$(function() { 
    var addMilIterator = 0; 
    $(document).on('click', '[data-ele="addMil"]', function(e) { 
    var clone = $('.milestones-form').first().clone(false); 

    $(clone).find('[name]').each(function() { 
     var name = $(this).attr('name'); 
     $(this).val(""); 
     $(this).attr('name', name + '_' + addMilIterator); 
    }); 
    addMilIterator++; 
    $('.milestones-form').last().after(clone); 
    }); 
    $(document).on('focus', '[name^="date"]', function() { 
    console.log($(this).attr("name")); 
    $(this).datepicker({ 

    }) 
    }); 
}); 

请检查update Fiddle

Answer 2

这是因为每一个克隆所创建的onclick 具有相同id值即。 sandbox-container

属性id应该是唯一的功能工作。

解决方案

里面，当你创建克隆点击事件，你也可以产生&附上独特id值，像这样。

var clone = $('.milestones-form').first().clone().prop('id', 'sandbox-container'+ num++); 

你需要之前用来初始化numOUTSIDE click事件。所以整个JQuery代码看起来像。

$(function() { 
    var addMilIterator = 0; 
    var num = 1; 

    $(document).on('click', '[data-ele="addMil"]', function(e) { 

    var clone = $('.milestones-form').first().clone().prop('id', 'sandbox-container'+ num++); 

    $(clone).find('[name]').each(function() { 
     ... 
     ... 

Your Fiddle updated