jQuery DatePicker non funziona sulla riga appena aggiunta

Question

Ho una griglia che viene visualizzata come tabella. Ho un pulsante "Aggiungi" e facendo clic su questo, creerà una nuova riga nella tabella. La creazione della riga viene eseguita utilizzando il metodo "clone (true)" in jQuery. La riga clonata è una riga fittizia che è nascosta nella griglia. Ho assegnato jQuery DatePicker per un TextBox. Funziona bene per la riga esistente. Ma quando faccio clic sulla casella di testo DatePicker per la riga appena aggiunta, non si apre. Si apre per la riga esistente. Quale potrebbe essere il problema?

Il mio codice è simile:

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

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

Answer 1

difficile dire con fuori vedere il tuo codice, ma ..

Ciò è probabilmente dovuto al jquery utilizzato per assegnare il DatePicker all'ingresso viene chiamato a pagina caricare. Quindi, quando clonate l'input, l'input appena clonato non ha il datepicker collegato ad esso (poiché non esisteva al caricamento della pagina).

È necessario collegare il dispositivo DatePicker al nuovo input dopo aver chiamato il metodo clone.

Answer 2

Suppongo che tu abbia aggiunto il datapicker su document.ready a tutti gli elementi che corrispondono a un determinato selettore. Questo non lo aggiunge agli elementi creati in futuro. Per fare questo, si dovrebbe verificare jQuery live:

si lega un gestore ad un evento (come click) per tutti gli attuali - elemento abbinato - e il futuro.

Answer 3

Forse il TextBox clonato ha lo stesso ID di quello originale, confondendo così il controllo del calendario? In caso contrario, fornire più codice e possibili messaggi di errore.

Answer 4

È anche possibile aggiungere/forzare un evento per gestire il processo. Per un esempio, ho un posto dove aggiungo e completamento automatico a un elemento aggiunto. gestisco l'evento "cambiamento" così (all'interno di una funzione .Per passare()):

$(this).change(); // fire change event (to be used in other user controls) 

Poi ho chiamare una funzione all'interno di un gestore di cambiamento di eventi per l'elemento specifico che ha un completamento automatico in esso per aggiungerlo ai quell'oggetto. Ci sono altri modi, le mie circostanze dettate lo faccio manualmente mentre sto manipolando una nuova sezione complessa aggiunta, non solo una riga della tabella.

/* apply autocomplete function */ 
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 
    }); 
}; 

ci sono altri modi, ma la premessa di base è lo stesso - aggiungere i gestori per l'entità appena aggiunto all'interno della riga si aggiunge alla tabella.

Answer 5

Prova questo:

$("row-you-are-cloning").clone().appendTo("your-table").datepicker({ 
    showButtonPanel  : true, 
    showOn    : 'button', 
    buttonImageOnly  : true, 
    buttonImage   : '../../Image/calendar.gif' 
}); 

Answer 6

è necessario rimuovere la classe "hasDatepicker" dall'elemento clonato prima.

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