menempatkan datepicker () pada elemen yang dibuat secara dinamis - JQuery / JQueryUI

Saya telah membuat kotak teks secara dinamis, dan saya ingin masing-masing dapat menampilkan kalender saat diklik. Kode yang saya gunakan adalah:

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

Yang hanya akan berfungsi pada kotak teks pertama, meskipun semua kotak teks saya memiliki kelas yang disebut datepicker_recurring_start.

Bantuan Anda sangat dihargai!

inilah triknya:

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

DEMO

The $('...selector..').on('..event..', '...another-selector...', ...callback...);berarti sintaks:
Tambah pendengar ke ...selector..(yang bodydalam contoh kita) untuk acara ..event..( 'fokus' dalam contoh kita). Untuk semua turunan dari node yang cocok yang cocok dengan selektor ...another-selector...( .datepicker_recurring_startdalam contoh kita), terapkan event handler ...callback...(fungsi inline dalam contoh kita)

Lihat http://api.jquery.com/on/ dan terutama bagian tentang "acara yang didelegasikan"

Bagi saya di bawah ini jquery bekerja:

mengubah "body" menjadi document

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

Terima kasih untuk skafandri

Catatan: pastikan id Anda berbeda untuk setiap bidang

Jawaban luar biasa oleh skafandri +1

Ini baru saja diperbarui untuk memeriksa kelas hasDatepicker.

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

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

});

Pastikan elemen Anda dengan .date-pickerkelas tersebut TIDAK memiliki hasDatepickerkelas. Jika ya, bahkan upaya untuk menginisialisasi ulang dengan $myDatepicker.datepicker();akan gagal! Sebaliknya Anda perlu melakukan ...

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

Anda perlu menjalankan .datepicker();lagi setelah Anda secara dinamis membuat elemen kotak teks lainnya.

Saya akan merekomendasikan melakukannya dalam metode panggilan balik dari panggilan yang menambahkan elemen ke DOM.

Jadi katakanlah Anda menggunakan metode JQuery Load untuk menarik elemen dari sumber dan memuatnya ke DOM, Anda akan melakukan sesuatu seperti ini:

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

Metode baru untuk elemen dinamis adalah MutationsObserver .. Contoh berikut menggunakan underscore.js untuk menggunakan fungsi (_.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
});

Inilah yang berhasil untuk saya (menggunakan jquery datepicker):

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

Tidak ada solusi lain yang berhasil untuk saya. Di aplikasi saya, saya menambahkan elemen rentang tanggal ke dokumen menggunakan jquery dan kemudian menerapkan datepicker padanya. Jadi tidak ada solusi acara yang berfungsi karena alasan tertentu.

Inilah yang akhirnya berhasil:

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

Semoga ini bisa membantu seseorang karena ini membuat saya sedikit mundur.

Anda dapat menambahkan kelas .datepicker dalam fungsi javascript, agar dapat secara dinamis mengubah jenis masukan

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

Saya telah mengubah jawaban @skafandri untuk menghindari penerapan ulang datepickerkonstruktor ke semua input dengan .datepicker_recurring_startkelas.

Berikut HTML-nya:

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

Inilah JS:

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

inilah demo yang berfungsi

Inilah yang berhasil bagi saya di JQuery 1.3 dan ditampilkan pada klik / fokus pertama

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

ini membutuhkan masukan Anda memiliki kelas 'mostrar_calendario'

Live adalah untuk JQuery 1.3+ untuk versi yang lebih baru, Anda perlu menyesuaikannya dengan "on"

Lihat lebih lanjut tentang perbedaannya di sini http://api.jquery.com/live/

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