đưa datepicker () vào các phần tử được tạo động - JQuery / JQueryUI

Tôi đã tự động tạo các hộp văn bản và tôi muốn mỗi hộp có thể hiển thị lịch khi nhấp. Mã tôi đang sử dụng là:

$(".datepicker_recurring_start" ).datepicker();

Cái này sẽ chỉ hoạt động trên hộp văn bản đầu tiên, mặc dù tất cả các hộp văn bản của tôi có một lớp được gọi là datepicker_recurring_start.

Sự giúp đỡ của bạn được đánh giá rất cao!

Đây là mẹo:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

BẢN GIỚI THIỆU

Các $('...selector..').on('..event..', '...another-selector...', ...callback...);phương tiện cú pháp:
Thêm một người biết lắng nghe để ...selector..(các bodytrong ví dụ của chúng tôi) cho sự kiện ..event..( 'tập trung' trong ví dụ của chúng tôi). Đối với tất cả hậu duệ của các nút phù hợp khớp với bộ chọn ...another-selector...( .datepicker_recurring_starttrong ví dụ của chúng tôi), hãy áp dụng trình xử lý sự kiện ...callback...(hàm nội tuyến trong ví dụ của chúng tôi)

Xem http://api.jquery.com/on/ và đặc biệt là phần về "sự kiện được ủy quyền"

Đối với tôi dưới đây jquery làm việc:

thay đổi "cơ thể" thành tài liệu

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

Cảm ơn skafandri

Lưu ý: đảm bảo id của bạn khác nhau cho từng trường

Câu trả lời tuyệt vời của skafandri +1

Đây chỉ là cập nhật để kiểm tra lớp hasDatepicker.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

Hãy chắc chắn rằng phần tử của bạn với .date-pickerlớp KHÔNG có một hasDatepickerlớp. Nếu có, ngay cả một nỗ lực để khởi tạo lại với $myDatepicker.datepicker();sẽ thất bại! Thay vào đó bạn cần phải làm ...

$myDatepicker.removeClass('hasDatepicker').datepicker();

Bạn cần chạy .datepicker();lại sau khi bạn tự động tạo các thành phần hộp văn bản khác.

Tôi khuyên bạn nên làm như vậy trong phương thức gọi lại của cuộc gọi đang thêm các phần tử vào DOM.

Vì vậy, giả sử bạn đang sử dụng phương thức Tải JQuery để kéo các phần tử từ nguồn và tải chúng vào DOM, bạn sẽ làm một cái gì đó như thế này:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

Phương thức mới cho các phần tử động là MutationsObserver .. Ví dụ sau sử dụng hàm underscore.js để sử dụng hàm (_.each).

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

Đây là những gì làm việc cho tôi (sử dụng jquery datepicker):

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});

Không có giải pháp nào khác làm việc cho tôi. Trong ứng dụng của tôi, tôi đang thêm các yếu tố phạm vi ngày vào tài liệu bằng cách sử dụng jquery và sau đó áp dụng công cụ hẹn hò với chúng. Vì vậy, không có giải pháp sự kiện nào hoạt động vì một số lý do.

Đây là những gì cuối cùng đã làm việc:

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

Hy vọng điều này sẽ giúp ai đó bởi vì điều này đặt tôi trở lại một chút.

bạn có thể thêm lớp .datepicker trong hàm javascript, để có thể tự động thay đổi kiểu nhập

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

Tôi đã sửa đổi câu trả lời @skafandri để tránh áp dụng lại hàm datepickertạo cho tất cả các đầu vào với .datepicker_recurring_startlớp.

Đây là HTML:

<div id="content"></div>
<button id="cmd">add a datepicker</button>

Đây là JS:

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

đây là bản demo

Đây là những gì hoạt động với tôi trên JQuery 1.3 và đang hiển thị ở lần nhấp / tập trung đầu tiên

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

điều này cần rằng đầu vào của bạn có lớp 'mostrar_calWikiio'

Live là dành cho JQuery 1.3+ cho các phiên bản mới hơn, bạn cần điều chỉnh tính năng này thành "bật"

Xem thêm về sự khác biệt ở đây http://api.jquery.com/live/

$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});