umieszczenie datepicker () na dynamicznie tworzonych elementach - JQuery / JQueryUI

Mam dynamicznie utworzone pola tekstowe i chcę, aby każde z nich mogło wyświetlać kalendarz po kliknięciu. Kod, którego używam to:

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

Co będzie działać tylko na pierwszym polu tekstowym, mimo że wszystkie moje pola tekstowe mają klasę o nazwie datepicker_recurring_start.

Twoja pomoc jest bardzo ceniona!

oto sztuczka:

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

PRÓBNY

Te $('...selector..').on('..event..', '...another-selector...', ...callback...);środki składniowe:
Dodawanie słuchacza ...selector..(the bodyw naszym przykładzie) za zdarzenie ..event..( „FOCUS” w naszym przykładzie). Dla wszystkich potomków pasujących węzłów, które pasują do selektora ...another-selector...( .datepicker_recurring_startw naszym przykładzie), zastosuj procedurę obsługi zdarzeń ...callback...(funkcję wbudowaną w naszym przykładzie)

Zobacz http://api.jquery.com/on/, a zwłaszcza sekcję o „wydarzeniach delegowanych”

U mnie poniżej działało jquery:

zmiana „treści” na dokument

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

Dzięki skafandri

Uwaga: upewnij się, że Twój identyfikator jest inny dla każdego pola

Doskonała odpowiedź od skafandri +1

Zostało to właśnie zaktualizowane, aby sprawdzić klasę hasDatepicker.

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

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

});

Upewnij się, że Twój element z .date-pickerklasą NIE ma już hasDatepickerklasy. Jeśli tak się stanie, nawet próba ponownej inicjalizacji za pomocą programu $myDatepicker.datepicker();zakończy się niepowodzeniem! Zamiast tego musisz zrobić ...

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

Musisz uruchomić .datepicker();ponownie po dynamicznym utworzeniu innych elementów pola tekstowego.

Poleciłbym to zrobić w metodzie wywołania zwrotnego wywołania, czyli dodaniu elementów do DOM.

Powiedzmy, że używasz metody JQuery Load do ściągnięcia elementów ze źródła i załadowania ich do DOM, zrobiłbyś coś takiego:

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

Nowa metoda dla elementów dynamicznych to MutationsObserver .. W poniższym przykładzie użyto znaku podkreślenia.js do użycia funkcji (_.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
});

Oto, co zadziałało dla mnie (używając jquery datepicker):

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

Żadne z innych rozwiązań nie działało dla mnie. W mojej aplikacji dodaję elementy zakresu dat do dokumentu za pomocą jQuery, a następnie stosuję do nich DatePicker. Więc żadne z rozwiązań eventowych nie działało z jakiegoś powodu.

Oto, co w końcu zadziałało:

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

Mam nadzieję, że to komuś pomoże, ponieważ trochę mnie cofnęło.

możesz dodać klasę .datepicker do funkcji javascript, aby móc dynamicznie zmieniać typ danych wejściowych

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

Zmodyfikowałem odpowiedź @skafandri, aby uniknąć ponownego zastosowania datepickerkonstruktora do wszystkich danych wejściowych z .datepicker_recurring_startklasą.

Oto kod HTML:

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

Oto JS:

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

oto działające demo

To właśnie zadziałało dla mnie w JQuery 1.3 i jest widoczne przy pierwszym kliknięciu / fokusie

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

wymaga to, aby twoje dane wejściowe miały klasę „mostrar_calendario”

Live jest dla JQuery 1.3+ dla nowszych wersji, musisz dostosować to do „on”

Zobacz więcej o różnicy tutaj http://api.jquery.com/live/

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