Question

我在我的页面中使用bootstrap datepicker。

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

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

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

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

这是我到目前为止所尝试的......

0x00

如果有帮助的话，我已经创造了一个小提琴。任何提示都可以。 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

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

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

<强>解决方案

在创建克隆时，在点击事件中，您还可以生成＆amp;附加一个唯一的id值。

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

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

在页面中使用多个日期选择器的问题

2 个答案: