如何让jquery datepicker在克隆行上工作？

Question

我已经浏览了许多帮助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++; 

}); 

Answer 1

ClaudioZ有它差不多吧......

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

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

由于Russell G解释为in this answer，这可能是因为datepicker对象认为它已在整个DOM中初始化并中止。

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

See jsFiddle here

$(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() 

Answer 2

再次在click事件中调用$（...）。datepicker（）。

添加类 “mydatepickers” 到输入

$（ “mydatepickers。”）日期选择器（）。