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

【问题标题】：issue with multiple datepickers in a page页面中的多个日期选择器问题
【发布时间】：2017-01-20 08:47:15
【问题描述】：

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

我使用的表单有多个动态生成的日期选择器。

现在的情况是当您单击第一个输入元素并选择日期时，它适用于该输入字段，

现在添加另一个元素并单击该输入字段。日期选择器未正确初始化。

如果您首先添加元素并单击输入，它会正常工作..

这是我迄今为止尝试过的......

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

请不要因为我的编辑不好就发表负面评论。谢谢大家...

【问题讨论】：

我认为这可能会对您有所帮助，您可能需要稍微更改您的代码，但这应该正是您正在寻找的 - stackoverflow.com/questions/32694306/…

标签： javascript jquery html twitter-bootstrap datepicker

【解决方案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

【讨论】：

确实如此。

【解决方案2】：

这是因为您在 onclick 上创建的每个克隆都具有相同的id 值，即。 sandbox-container

id 的属性应该是唯一的，这样功能才能正常工作。

解决方案

当您创建克隆时，在您的点击事件中，您还可以像这样生成并附加一个唯一的 id 值。

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

在此之前您需要初始化num 在点击事件之外。所以整个 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

【讨论】：