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

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

在输入

中添加“mydatepickers”类

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

Answer 2

ClaudioZ几乎没错......

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

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

正如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 3

工作原理：

需要删除克隆元素的类 hasDatepickerfrom ，因为这是阻止datepicker附加到特定元素的原因。

需要从每个克隆元素中删除 id 属性.datepicker（）将假定将datepicker添加到此元素。

在克隆元素上调用 datepicker （）之后。

newNode.find('.test').each(function() {
   $(this).removeAttr('id').removeClass('hasDatepicker');
   $(this).datepicker({dateFormat: 'dd-mm-yy', minDate: 0, autoclose: true,});
});

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

3 个答案: