Datepicker选择的值始终位于第一个文本框中 [英] Datepicker selected value always goes on the first textbox

问题描述

我正在尝试创建一种表单，在其中通过克隆表单中的现有元素来动态添加元素. 现在我面临的问题是当我克隆了具有"datepicker"类的文本框时.当我从克隆的元素中选择日期时，其选择的值将显示在我从中进行克隆的第一个元素中.

I am trying to create a form in which elements are added dynamically by cloning existing elements in the form. Now the problem i am facing is when i cloned textbox which has class "datepicker".When I select the date from cloned element it's selected value shows in the first element from which I cloned it.

这是代码:

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

在document.ready中，我已经尝试过:

and in document.ready I tried this:

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

和这个:

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

，但两者给出的结果相同. 请引导我. .谢谢

but both gives the same result. Plz guide me. . Thanx

推荐答案

在通过克隆原始div动态创建输入元素时，此处.clone()将进行浅层克隆而不是深层克隆，因此输入框实例将始终相同因此，日期选择器将引用原始输入框.

As you are creating input elements dynamically by cloning original div, here .clone() will do shallow cloning and not deep cloning and hence input box instance will be same always and hence datepicker will refer to original input box.

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

You can remove id and class of the copied input box and then apply datepicker on it.

请参见下面的jquery代码:

Please see below jquery code :

$(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选择的值始终位于第一个文本框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！