Question

我正在尝试创建一个表单，通过克隆表单中的现有元素来动态添加元素。现在我遇到的问题是当我克隆了具有类＆＃34; datepicker＆＃34;的文本框时。当我从克隆元素中选择日期时，它所选择的值显示在我克隆它的第一个元素中。 / p>

以下是代码：

$(copiedDiv).find('input[type="text"]').filter('.datepicker').removeClass('hasDatepicker').datepicker();

并在document.ready中尝试了这个：

$(function () {
    $(".datepicker").datepicker();
});

和此：

$(function () {
    $(".datepicker").each(function(){$(this).datepicker()});
});

但两者都给出了相同的结果。 Plz指导我。。感谢名单

Answer 1

当您通过克隆原始div动态创建输入元素时，此处.clone()将进行浅层克隆而不是深度克隆，因此输入框实例将始终相同，因此datepicker将引用原始输入框。

您可以删除复制的输入框的id和class，然后在其上应用datepicker。

请参阅下面的jquery代码：

$(function(){
    $('input[type=button]').click(function(){
      var copiedDiv = $('#container').clone();

      var input = $(copiedDiv).find('input[type="text"]');

      $(copiedDiv).removeAttr('id');

      $(input).removeAttr('id').removeClass('datepicker hasDatepicker').val('');

      $(input).datepicker();             

      $('#container').after(copiedDiv);
    });

  // bind datepicker to existing input with class="datepicker"
  $(".datepicker").datepicker();
});

<强> Demo

Datepicker选定值始终位于第一个文本框中

1 个答案: