dinamik olarak oluşturulan öğelere datepicker () koymak - JQuery / JQueryUI

Dinamik olarak metin kutuları oluşturdum ve her birinin tıklandığında bir takvim görüntüleyebilmesini istiyorum. Kullandığım kod:

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

Tüm metin kutularımın datepicker_recurrent_start adında bir sınıfa sahip olmasına rağmen, yalnızca ilk metin kutusunda çalışır.

Yardımınız çok takdir ediliyor!

işte hile:

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

DEMO

$('...selector..').on('..event..', '...another-selector...', ...callback...);Sözdizimi aracı:
için bir dinleyici ekleyin ...selector..( bodyolay için bizim örneğimizde) ..event..(bizim örneğimizde 'odak'). Seçiciyle eşleşen eşleşen düğümlerin tüm alt öğeleri için ...another-selector...( .datepicker_recurring_startörneğimizde), olay işleyiciyi uygulayın ...callback...(örneğimizdeki satır içi işlevi)

Bkz http://api.jquery.com/on/ ve özellikle "yetkilendirilen olaylar" hakkında bölüm

Benim için jquery'nin altında çalıştı:

"body" belgeye dönüştürülüyor

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

Skafandri sayesinde

Not: Her alan için kimliğinizin farklı olduğundan emin olun

Skafandri'den mükemmel cevap +1

Bu sadece hasDatepicker sınıfını kontrol etmek için güncellenmiştir.

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

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

});

.date-pickerSınıftaki öğenizin zaten bir hasDatepickersınıfı OLMADIĞINDAN emin olun . Varsa, yeniden başlatma girişimi bile $myDatepicker.datepicker();başarısız olacaktır! Bunun yerine yapmanız gereken ...

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

.datepicker();Diğer metin kutusu öğelerini dinamik olarak oluşturduktan sonra tekrar çalıştırmanız gerekir .

Öğeleri DOM'a ekleyen çağrının geri çağrı yönteminde bunu yapmanızı tavsiye ederim.

Öyleyse, öğeleri bir kaynaktan almak ve DOM'a yüklemek için JQuery Load yöntemini kullandığınızı varsayalım, şöyle bir şey yaparsınız:

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

Dinamik elemanlar için yeni bir yöntemdir MutationsObserver .. Aşağıdaki örnekte underscore.js kullanımı (_.each) işlevine.

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
});

Benim için işe yarayan şey buydu (jquery datepicker kullanarak):

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

Diğer çözümlerin hiçbiri benim için işe yaramadı. Uygulamamda, tarih aralığı öğelerini jquery kullanarak belgeye ekliyorum ve ardından bunlara tarih seçici uyguluyorum. Yani olay çözümlerinden hiçbiri bir sebepten dolayı işe yaramadı.

Sonunda işe yarayan buydu:

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

Umarım bu birisine yardımcı olur çünkü bu beni biraz geride bıraktı.

giriş türünü dinamik olarak değiştirebilmek için bir javascript işlevine .datepicker sınıfını ekleyebilirsiniz

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

Yapıcıyı sınıflı datepickertüm girdilere yeniden uygulamayı önlemek için @skafandri yanıtını değiştirdim .datepicker_recurring_start.

İşte HTML:

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

İşte JS:

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

işte çalışan bir demo

Bu, benim için JQuery 1.3'te işe yarayan ve ilk tıklama / odakta gösterilen şeydi

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

bu, girdinizin 'mostrar_calendario' sınıfına sahip olmasını gerektirir

Canlı, JQuery 1.3+ içindir, daha yeni sürümler için bunu "açık" olarak uyarlamanız gerekir

Farkla ilgili daha fazla bilgiyi burada bulabilirsiniz http://api.jquery.com/live/

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