sao chép jQuery datepicker

Question

Chức năng datepicker chỉ hoạt động trên hộp nhập đầu tiên được tạo.

Tôi đang cố gắng sao chép một datepicker bằng cách sao chép div có chứa nó.

<a href="#" id="dupMe">click</a> 
<div id="template"> 
    input-text <input type="text" value="text1" id="txt" /> 
    date time picker <input type="text" id="example" value="(add date)" /> 
</div> 

Để khởi tạo datepicker, theo jQuery UI documentation tôi chỉ phải làm $('#example').datepicker(); và nó làm việc, nhưng chỉ trên datepicker đầu tiên được tạo ra.

Mã lặp lại trong các div như sau:

$("a#dupMe").click(function(event){ 
    event.preventDefault(); 
    i++; 
    var a = $("#template") 
      .clone(true) 
      .insertBefore("#template") 
      .hide() 
      .fadeIn(1000); 
    a.find("input#txt").attr('value', i); 
    a.find("input#example").datepicker(); 
}); 

Điều kỳ lạ là trên document.ready tôi có:

$('#template #example').datepicker(); 
$("#template #txt").click(function() { alert($(this).val()); }); 

và nếu tôi bấm vào #txt nó luôn hoạt động.

Answer 1

Tôi cũng khuyên bạn chỉ nên sử dụng tên lớp chung. Tuy nhiên, nếu bạn chống lại điều này vì một lý do nào đó, bạn cũng có thể viết một hàm để tạo bộ chọn ngày cho tất cả các hộp văn bản trong mẫu của bạn div (được gọi sau mỗi lần sao chép). Một cái gì đó như:

function makeDatePickers() { 
    $("#template input[type=text]").datepicker(); 
} 

Answer 2

tôi sử dụng một lớp CSS thay vì:

<input type="text" id="BeginDate" class="calendar" /> 
<input type="text" id="EndDate" class="calendar" /> 

Sau đó, trong chức năng document.ready của bạn:

$('.calendar').datepicker(); 

Sử dụng nó theo cách đó cho nhiều lĩnh vực lịch làm việc cho tôi.

Answer 3

Tôi đã gặp phải một vấn đề rất giống nhau sau hàng giờ thử nghiệm tôi đã tìm được giải pháp. Tôi đã sao chép một khối mã HTML và chèn nó sau một phần đã chứa lịch trình chọn ngày của jQuery. Những gì tôi không nhận ra lúc đầu là lịch giao diện người dùng jQuery sửa đổi lớp của phần tử khi thực thi hàm .datepicker(). Kết quả là khi bạn cố gắng sao chép mã và bắt đầu một phiên bản mới của lịch cho phần mới đó, nó không thành công vì theo CSS đã có. Nếu bạn cố gắng sử dụng .datepicker('destroy') điều này không phá hủy trường hợp ma này bởi vì nó không thực sự tồn tại. Tôi đã giải quyết vấn đề bằng cách đặt lại lớp của phần tử bộ chọn ngày trong HTML của tôi rồi thêm phần tử datepicker vào phần tử đó ...

Dưới đây là mã tôi đang sử dụng. Hy vọng rằng điều này tiết kiệm cho người khác một thời gian ...

$('#addaddress').click(function() { 
    var count = $('.address_template').size(); 
    var html = $('.address_template').eq(0).html(); 
    $('#addaddress').before('<div class="address_template">' + html + '</div>'); 
    $('.address_template H1').eq(count).html("Previous Address " + count); 
    $('.address_date').eq(count).attr("class","address_date"); 
    $('.address_date').eq(count).attr("id","movein" + count); 
    $("#movein" + count).datepicker(); 
}); 

Answer 4

html Tôi nhân bản có nhiều đầu vào datepicker.

Sử dụng câu trả lời Ryan Stemkoski và bình luận Alex King, tôi đã đưa ra giải pháp này:

var clonedObject = this.el.find('.jLo:last-child') 
clonedObject.find('input.ui-datepicker').each(function(index, element) { 
    $(element).removeClass('hasDatepicker'); 
    $(element).datepicker(); 
}); 
clonedObject.appendTo('.jLo'); 

Cảm ơn yall.