2017-01-20 31 views
0

我在我的页面中使用引导日期选择器。问题与页面中的多个日期选择器

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

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

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

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

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

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

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

+0

我认为这可能会帮助你,你可能需要改变你的代码一点点,但是这应该是你在寻找什么 - http://stackoverflow.com/questions/32694306/use-jquery-datepicker-on-dynamic-created-fields – TrojanMorse

回答

0

你必须确保你克隆你的输入正确。 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

+0

确实如此。 –

0

这是因为每一个克隆所创建的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

+0

哦,我想初始化独特的名称选择器会做..谢谢你.. –