Question

我遇到了JQuery Datepicker的一些问题。

正如您在我的JSFiddle https://jsfiddle.net/2vtercs1/11/中看到的，我创建了一个表，并在第二列中添加了一个日期选择器，并且它正常工作。

我的目标是能够克隆第一行并将其添加到表格的底部。克隆部分工作正常，但第二个日期选择器没有触发。我试图将第二个datepicker的类更改为＆＃34; datepicker2＆＃34;，然后我从头开始在脚本中启动它

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

但没有成功。有人可以帮我吗？

Answer 1

当你向一个元素添加一个datepicker时，它会将类hasDatepicker添加到该元素，以便知道它已经有一个datepicker，而不是添加另一个。

克隆元素时，元素仍然具有该类，但没有日期选择器您必须调用jQuery UI datepicker destroy方法，或者只是删除该类，以便能够添加日期选择器

$（function（）{ $（ “日期选择器”）日期选择器（）。 }）;

$(document).on('click', '.clone', function() {
  var currRow = $(this).closest('tr');
  var clone   = currRow.clone(false);

  clone.prop('id', 'row' + ($(".datepicker").length + 1));
  currRow.after(clone);

  $('.datepicker').removeClass('hasDatepicker').removeAttr('id').datepicker();
});

FIDDLE

Answer 2

如果要克隆日期选择器，则需要destroy旧日期选择器的引用，并且需要删除id属性，然后才需要触发它。

 $(".clone").on('click', function(){
    var trow = $("table tr#row1").clone(true);
    trow.attr( 'id', function() { return this.id + Math.random(); });
    trow.find('input.datepicker').datepicker("destroy").removeAttr('id').datepicker();
    trow.appendTo("table");
  })

DEMO

加载页面后，Datepicker不会触发

2 个答案: