Как я могу заставить jquery datepicker работать с клонированными рядами?

Question

Я просмотрел много страниц, помогая с jquery datepicker, не работающим на клонированных строках, но я не могу перевести какие-либо предложения, которые я нашел в моем конкретном случае. Вот ссылка Fiddle: 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 (или любое имя вы выбрали) класс необходимо.

Но перед повторной инициализацией элементов datepicker в событии click, , вы должны сначала отделить поля 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 2

Вызов $ (...). Datepicker() снова в событии click.

Добавить класс "mydatepickers" на вход

$ ("mydatepickers"). DatePicker().