jQuery DatePicker no funciona en la fila recién agregada

Question

Tengo una vista de cuadrícula que se muestra como una tabla. Tengo un botón "Agregar" y al hacer clic en eso, creará una nueva fila en la tabla. La creación de filas se hace usando el método "clone (true)" en jQuery. La fila clonada es una fila ficticia que está oculta en la vista de cuadrícula. He asignado jQuery DatePicker para un TextBox. Funciona bien para la fila existente. Pero cuando hago clic en el cuadro de texto DatePicker para la fila recién agregada, no se abre. Se abre para la fila existente. ¿Cuál podría ser el problema?

Mi código es como:

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

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

Answer 1

difícil saber con a ver su código, pero ..

Esto es probablemente debido a la jQuery utilizado para asignar el selector de fecha para la entrada en la página que se llama carga. Por lo tanto, cuando clona la entrada, la entrada recién clonada no tiene el selector de fecha conectado (ya que no existía en la carga de la página).

Deberá conectar el selector de fecha a la nueva entrada después de llamar al método de clonación.

Answer 2

Supongo que ha agregado el marcador de fecha en document.ready a todos los elementos que coincidan con un selector determinado. Esto no lo agrega a elementos creados en el futuro. Para hacer eso, usted debe comprobar fuera de jQuery live:

se une a un manejador a un evento (como clic) para todos los actuales - elemento emparejado - y el futuro.

Answer 3

¿Quizás el TextBox clonado tiene la misma identificación que el original, confundiendo así el control del calendario? Si no es así, proporcione más código y posibles mensajes de error.

Answer 4

También puede agregar/forzar un evento para administrar el proceso. Por ejemplo, tengo un lugar donde agrego y autocompleto a un elemento agregado. administro el evento "cambio" de este modo (dentro de una función .Cambiar()):

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

Entonces llama a una función dentro de un manejador de eventos de cambio para el artículo específico que tiene una función de autocompletar en él para agregarlo a ese artículo. Hay otras formas, según mi circunstancia, de hacerlo manualmente, ya que estoy manipulando una sección compleja recién agregada, no solo una fila de la tabla.

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

hay otras maneras, pero la premisa básica es la misma - añadir los manejadores a la entidad recién agregado dentro de la fila se agrega a la tabla.

Answer 5

Prueba esto:

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

Answer 6

usted tiene que quitar la clase "hasDatepicker" desde el elemento clonado por primera vez.

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