Setzen von datepicker () auf dynamisch erstellte Elemente - JQuery / JQueryUI

Ich habe dynamisch Textfelder erstellt und möchte, dass jedes von ihnen beim Klicken einen Kalender anzeigen kann. Der Code, den ich benutze, ist:

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

Dies funktioniert nur für das erste Textfeld, obwohl alle meine Textfelder eine Klasse namens datepicker_recurring_start haben.

Deine Hilfe ist sehr Willkommen!

Hier ist der Trick:

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

DEMO

Die $('...selector..').on('..event..', '...another-selector...', ...callback...);Syntax bedeutet:
Fügen Sie einen Listener ...selector..( bodyin unserem Beispiel) für das Ereignis hinzu ..event..(in unserem Beispiel 'focus'). Wenden Sie für alle Nachkommen der übereinstimmenden Knoten, die mit dem Selektor übereinstimmen ...another-selector...( .datepicker_recurring_startin unserem Beispiel), den Ereignishandler an ...callback...(die Inline-Funktion in unserem Beispiel).

Siehe http://api.jquery.com/on/ und insbesondere den Abschnitt über "delegierte Ereignisse".

Für mich unten hat jquery funktioniert:

"Körper" in Dokument ändern

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

Danke an Skafandri

Hinweis: Stellen Sie sicher, dass Ihre ID für jedes Feld unterschiedlich ist

Hervorragende Antwort von skafandri +1

Dies wird nur aktualisiert, um nach der hasDatepicker-Klasse zu suchen.

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

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

});

Stellen Sie sicher, dass Ihr Element mit der .date-pickerKlasse KEINE hasDatepickerKlasse hat. Wenn dies der Fall ist, schlägt sogar ein Versuch $myDatepicker.datepicker();fehl, mit neu zu initialisieren ! Stattdessen müssen Sie tun ...

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

Sie müssen das .datepicker();erneut ausführen , nachdem Sie die anderen Textfeldelemente dynamisch erstellt haben.

Ich würde dies in der Rückrufmethode des Aufrufs empfehlen, der die Elemente zum DOM hinzufügt.

Angenommen, Sie verwenden die JQuery Load-Methode, um die Elemente aus einer Quelle abzurufen und in das DOM zu laden. Gehen Sie dazu wie folgt vor:

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

Die neue Methode für dynamische Elemente ist MutationsObserver . Im folgenden Beispiel wird die Funktion (_.each) mit underscore.js verwendet.

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

Dies war, was für mich funktioniert hat (mit jquery datepicker):

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

Keine der anderen Lösungen hat bei mir funktioniert. In meiner App füge ich die Datumsbereichselemente mithilfe von jquery zum Dokument hinzu und wende dann Datepicker auf sie an. Daher funktionierte keine der Event-Lösungen aus irgendeinem Grund.

Das hat endlich geklappt:

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

Hoffe das hilft jemandem, denn das hat mich ein bisschen zurückgeworfen.

Sie können die Klasse .datepicker in einer Javascript-Funktion hinzufügen, um den Eingabetyp dynamisch ändern zu können

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

Ich habe die @ skafandri-Antwort geändert, um zu vermeiden, dass der datepickerKonstruktor erneut auf alle Eingaben mit .datepicker_recurring_startKlasse angewendet wird .

Hier ist der HTML:

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

Hier ist der JS:

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

hier ist eine Arbeits Demo

Dies hat bei JQuery 1.3 für mich funktioniert und wird beim ersten Klicken / Fokussieren angezeigt

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

Dies setzt voraus, dass Ihre Eingabe die Klasse 'mostrar_calendario' hat.

Live ist für JQuery 1.3+ für neuere Versionen, die Sie an "on" anpassen müssen.

Weitere Informationen zum Unterschied finden Sie hier http://api.jquery.com/live/

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