JQuery DatePicker funktioniert nicht in der neulich hinzugefügten Zeile

Question

Ich habe ein Gridview, das als Tabelle gerendert wird. Ich habe eine "Hinzufügen" Schaltfläche und wenn ich darauf klicke, wird eine neue Zeile in der Tabelle erstellt. Die Zeilenerstellung erfolgt mit der "clone(true)" Methode in jQuery. Die geklonte Zeile ist eine Dummy-Zeile, die im Gridview versteckt ist. Ich habe dem TextBox jQuery DatePicker zugewiesen. Es funktioniert gut für die vorhandene Zeile. Aber wenn ich auf das DatePicker-Textfeld für die neu hinzugefügte Zeile klicke, öffnet es sich nicht. Es öffnet sich für die vorhandene Zeile. Was könnte das Problem sein?

Mein Code sieht so aus:

$("input[name $= 'txtDateOrdered']").datepicker({

        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 1

Sie müssen zuerst die Klasse "hasDatepicker" vom geklonten Element entfernen.

$(".selector").removeClass('hasDatepicker').datepicker({
        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 2

Schwer zu sagen, ohne deinen Code zu sehen, aber...

Dies liegt wahrscheinlich daran, dass das jQuery, das verwendet wird, um den Datepicker dem Eingabefeld zuzuweisen, beim Seitenaufruf aufgerufen wird. Daher ist beim Klonen des Eingabefelds der neu geklonte Eingang nicht mit dem Datepicker verbunden (da er beim Seitenaufruf nicht vorhanden war).

Sie müssen den Datepicker an das neue Eingabefeld anhängen, nachdem Sie die Klonmethode aufgerufen haben.

Answer 3

Ich gehe davon aus, dass du den Datepicker auf document.ready zu allen Elementen hinzugefügt hast, die einem bestimmten Selektor entsprechen. Dies fügt ihn nicht zu Elementen hinzu, die in der Zukunft erstellt werden. Um das zu tun, solltest du dir jQuery live anschauen:

Bindet einen Handler an ein Ereignis (wie klicken) für alle aktuellen - und zukünftigen - übereinstimmenden Elemente.

Answer 4

Vielleicht hat das geklonte TextBox die gleiche ID wie das Original, was den Kalendersteuerung durcheinander bringt? Wenn nicht, bitte mehr Code und mögliche Fehlermeldungen bereitstellen.

Answer 5

Sie können auch ein Ereignis hinzufügen/ erzwingen, um den Prozess zu verwalten. Zum Beispiel habe ich einen Ort, wo ich ein Autocomplete zu einem hinzugefügten Element hinzufüge. Ich verwalte das "change" Ereignis wie folgt (innerhalb einer .change() Funktion):

$(this).change(); // change Event auslösen (zur Verwendung in anderen Benutzersteuerelementen)

Dann rufe ich eine Funktion innerhalb eines Änderungsereignishandlers für das spezifische Element auf, das ein Autocomplete enthält, um es zu diesem Element hinzuzufügen. Es gibt andere Möglichkeiten, aber meine Umstände erforderten, dass ich dies manuell mache, da ich einen komplexen neu hinzugefügten Abschnitt manipuliere, nicht nur eine Tabellenzeile.

/* Autocomplete-Funktion anwenden */
function myAddAuto()
{
    $(".cptEntryArea").autocomplete("mywebservice/myService.asmx/GetMyAutocomplete", {
        dataType: 'json',
        data: {},
        type: "POST",
        contentType: "application/json; charset=utf-8",
        parse: function(data) { return myAutocompleteJSONParse(data); },
        maxRows: 100,
        formatItem: function(row) { return row["Description"] + ' (' + row["MyCode"] + ')' },
        minChars: 2,
        matchSubset: false,
        scrollHeight: 100,
        width: 300
    });
};

Es gibt andere Möglichkeiten, aber das grundlegende Konzept ist dasselbe - fügen Sie die Handler zu der neu hinzugefügten Entität innerhalb der Zeile hinzu, die Sie zur Tabelle hinzufügen.