Cách đính kèm datepicker jQuery UI vào trường mẫu được chèn động?

Question

Tôi có một bảng chứa một loạt các trường nhập, giống như một bảng tính. Một số trường đầu vào sử dụng thanh công cụ date của jQuery UI. Ngoài ra còn có một nút để thêm một hàng trong bảng.

Khi tôi nhấp vào nút để thêm hàng của bảng, nó sẽ được thêm vào DOM chính xác. Tuy nhiên, tiện ích con ngày tháng không được đính kèm vào các trường ngày trong hàng mới đó.

Tôi nghi ngờ câu trả lời là sử dụng live() - hoặc có thể on() - để gọi datepicker(), nhưng tôi không hiểu cú pháp nào để sử dụng. Mã dưới đây đã đẩy các giới hạn của sự hiểu biết jQuery của tôi. Đầu tôi đau. Cứu giúp?

<script type="text/javascript"> 
    $(function() { 
     $(".usedatepicker").datepicker(); 
    }); 

    $('.rowadd').live('click',function(){ 
     var appendTxt = '<tr><td><input class="usedatepicker" name="something" type="text" /></td></tr>'; 
     $("tr:last").after(appendTxt); 
    }); 

</script> 

Lưu ý 2: Tôi cũng đã thử điều này, với cả live() và on(). Dường như nó hoạt động trên cả hai trường gốc và các trường gốc, nhưng không thường xuyên (ít nhất là trong Chrome). Giống như, nó sẽ hoạt động trong ba giây và sau đó dừng lại trong ba giây, và sau đó làm việc trong ba giây và ...

$(function() { 
    $('.usedatepicker').live('click', function(){ 
     $(this).datepicker({showOn:'focus'}); 
    }); 
}); 

Answer 1

Chỉ cần rebind the datepicker sau khi thêm một hàng mới. Nếu không thành công, hãy thử phương thức "làm mới".

$('.rowadd').live('click',function(){ 
     var appendTxt = '<tr><td><input class="usedatepicker" name="something" type="text" /></td></tr>'; 
     $("tr:last").after(appendTxt); 
     $(".usedatepicker").datepicker(); // or 
     $(".usedatepicker").datepicker("refresh"); 
    });