使用datepickers複製HTML元素的jQuery UI日期選擇器

Question

我有一個表單，用戶可以根據需要動態添加一組字段。對於剛剛複製的最後一個條目和代碼（約工作，爲我的問題here）遞增的字段名的計數器代碼如下：

$("#addBeneficiary").click(function(e) { 
    e.preventDefault(); 
    var beneficiary = $(".beneficiary:last").clone(); 
    var count = parseInt(beneficiary.find("input:first").attr("id").match(/\d+/), 10); 
    beneficiary.find("input").each(function(indx, element) { 
     var name = $(element).attr('name').replace(count, count+1), 
      id = $(element).attr('id').replace(count, count+1); 
     $(element).attr('name', name); 
     $(element).attr('id', id); 
     $(element).val(''); 
    }); 

    $("#beneficiaries").append(beneficiary); 
    datepicker(); 
}); 

最後一行datepicker();僅僅是找出所有input.datepicker並執行一個函數jQuery UI datepicker()函數將日期選擇器添加到這些字段。我遇到的問題是這樣的; datepicker在第一個字段上工作正常，但是當它們動態添加時，datepicker不會彈出新字段。

我跟蹤了日誌語句的代碼執行情況，以確保我的datepicker()函數在append之後被調用，並且所有的工作。這裏是我的datepicker()代碼

var datepicker = function() { 
    $("input.datepicker").datepicker(); 
}; 

有誰知道爲什麼預期，這是不工作？

Answer 1

我的猜測是它與克隆有關。我知道你可以用動態添加元素的日期選擇器來激活它。試試this jsfiddle。

$("input.datepicker").live('focus', function(){ 
    var $this = $(this); 
    if(!$this.data('datepicker')) $this.datepicker(); 
});