web-dev-qa-db-de.com

datepicker () auf dynamisch erstellte Elemente setzen - JQuery/JQueryUI

Ich habe dynamisch Textfelder erstellt, und ich möchte, dass jeder einen Kalender per Klick anzeigen kann. Der Code, den ich verwende, lautet:

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

Das funktioniert nur für das erste Textfeld, obwohl alle meine Textfelder eine Klasse mit dem Namen datepicker_recurring_start haben.

Deine Hilfe ist sehr Willkommen!

108
steeped

hier ist der Trick:

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

DEMO

Die $('...selector..').on('..event..', '...another-selector...', ...callback...);-Syntax bedeutet:
Hinzufügen eines Listeners zu ...selector.. (in unserem Beispiel die body) für das Ereignis ..event.. (in unserem Beispiel 'focus'). Wenden Sie für alle Nachkommen der übereinstimmenden Knoten, die mit dem Selektor ...another-selector... (in unserem Beispiel .datepicker_recurring_start) übereinstimmen, den Ereignishandler ...callback... (die Inline-Funktion in unserem Beispiel) an.

Siehe http://api.jquery.com/on/ und insbesondere den Abschnitt "Delegierte Ereignisse".

241
ilyes kooli

Für mich unten arbeitete jquery:

"body" in Dokument ändern

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

Dank an skafandri

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

38
Tapash

Hervorragende Antwort von Skafandri +1

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

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

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

});
13
pleshy

Stellen Sie sicher, dass Ihr Element mit der .date-picker-Klasse NICHT bereits eine hasDatepicker-Klasse hat. Wenn dies der Fall ist, schlägt auch ein Versuch, mit $myDatepicker.datepicker(); neu zu initialisieren, fehl! Stattdessen musst du tun ...

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

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

Ich würde dies in der Callback-Methode des Aufrufs empfehlen, der die Elemente zum DOM hinzufügt.

Nehmen wir also an, Sie verwenden die JQuery-Load-Methode, um die Elemente aus einer Quelle zu ziehen und in das DOM zu laden.

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

Die neue Methode für dynamische Elemente ist MutationsObserver .. Das folgende Beispiel verwendet underscore.js , um die Funktion (_.each) zu verwenden.

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
});
1
Hady Shaltout

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

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

dazu muss Ihre Eingabe die Klasse 'mostrar_calendario' haben.

Live ist für JQuery 1.3 und höher. Für neuere Versionen müssen Sie diese Einstellung auf "Ein" anpassen.

Mehr über den Unterschied erfahren Sie hier http://api.jquery.com/live/

Keine der anderen Lösungen funktionierte für mich. In meiner App füge ich die Datumsbereichselemente mit jquery zum Dokument hinzu und wende dann datepicker darauf an. Daher funktionierte keine der Eventlösungen aus irgendeinem Grund.

Das hat endlich funktioniert:

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

Hoffe das hilft jemandem, weil mich das ein bisschen zurückgesetzt hat.

0
Chris

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

Hier ist der HTML-Code:

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

Hier ist die JS:

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

hier ist eine Arbeitsdemo

0
c0x6a

sie können die Klasse .datepicker in eine Javascript-Funktion einfügen, um den Eingabetyp dynamisch ändern zu können

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
0
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});
0
Siya Qalistic