2

我查看了许多帮助 jquery datepicker 在克隆行上不起作用的页面，但我似乎无法将我发现的任何建议翻译成我的特定案例。这是小提琴链接： http: //jsfiddle.net/BE5Lr/2893/ 任何建议将不胜感激。

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

var i = 1;
$("button").click(function() {
  $("table tr:first").clone().removeClass('hasDatepicker').find("input").each(function() {
    $(this).attr({
      'id': function(_, id) { return id + i },
      'name': function(_, name) { return name + i },
      'value': ''

    });
  }).end().appendTo("table");

  i++;

});
4

3 回答 3

2

ClaudioZ 几乎是对的……

添加一个 mydatepickers （或您选择的任何名称）类是必要的。

但是，在单击事件中重新初始化日期选择器元素之前，必须先分离日期选择器字段，然后再克隆行（即在单击处理程序中）。

正如 Russell G在这个答案中解释的那样，这可能是因为 datepicker 对象认为它已经在整个 DOM 中初始化并中止。

最后，在克隆行之后，您重新初始化它们。

在这里查看 jsFiddle

$(document).ready(function() {

    $(".mydatepickers").datepicker();

    //$( ".mydatepickers" ).datepicker();
    $( "input.mydatepickers" ).on('click', function() {
        //alert('hi'); 
        $(this).datepicker();
    });;

    var i = 1;
    $("button").on('click', function() {
        $('.mydatepickers').datepicker('destroy');
        myTr = $("table tr:first").clone().appendTo("table");
        myTr.removeClass('hasDatepicker').find("input").each(function() {
            $(this).attr({
                'id': function(_, id) { return id + i },
                'name': function(_, name) { return name + i },
                'value': ''
            });
        });
        //myTr.find('input[id^="datep"]').addClass("mydatepickers");
         $(".mydatepickers").datepicker();
        i++;
        alert('Current value of i is: ' + i);
    });

}); //END $(document).ready()
于 2013-06-26T23:40:37.330 回答
2

在 click 事件中再次调用 $(...).datepicker() 。

在输入中添加一个类“mydatepickers”

$(".mydatepickers").datepicker();

于 2013-06-26T21:59:29.800 回答
0

这个怎么运作：

需要从克隆的元素中删除类hasDatepicker，因为这是阻止日期选择器附加到特定元素的原因。

需要从每个克隆元素中删除id属性，否则 .datepicker() 将假定 datepicker 已添加到此元素。

在那次通话之后。克隆元素上的datepicker ()。

newNode.find('.test').each(function() {
   $(this).removeAttr('id').removeClass('hasDatepicker');
   $(this).datepicker({dateFormat: 'dd-mm-yy', minDate: 0, autoclose: true,});
});
于 2018-05-30T13:37:56.743 回答