JQuery UI Datepicker sobre tabla dinamica

[braianj]

hola tengo el siguiente problema, tengo una tabla que se va creando de acuerdo a datos devueltos por una consulta. Esta tabla se puede actualizar linea por linea, pero tiene la opcion de agregar una nueva linea (para esto se insertaria).
El tema es que tengo campos con fechas y datepickers asignados a estas, pero cuando agrego una nueva fila no puedo hacer que levante el datepicker sobre la nueva fila.
Paso algun codigo, cualquier ayuda es muy agradecida de antemano

Código HTML:

<table id="TablaOperacionTramo" class="TablaListado" style="margin:10px">
<thead>
	<tr>
		<th>
			C&oacute;digo Proyecto
		</th>
		<th>
			Fecha Valor
		</th>
	</tr>
</thead>
<tbody id="filascuerpo">
<?php $cuentaFilas = 0;
$fila = 0;
do { $cuentaFilas++;
	?>                        
	<tr style='cursor:pointer'>
		<td id="columna1fila<? echo $fila;?>" >
			<input id="Imp_CodigoProyecto<? echo $row_Orden['IdImporte']; ?>" class="TextoEdit" value="<? echo $row_Orden['Imp_CodigoProyecto']; ?>" onchange="reflejoCambioValores(<?php echo $row_Orden['IdImporte']; ?>);"  /> 
		</td>
		<td id="columna2fila<? echo $fila;?>" >
			<? $Imp_FechaValor= new Fechas($row_Orden['Imp_FechaValor']);?>
			<input id="Imp_FechaValor<? echo $row_Orden['IdImporte']; ?>" class="TextoEdit" readonly="readonly" value="<?php echo $Imp_FechaValor->TransFechaDesdeMySql(); ?>" style="width:130px" onchange="reflejoCambioValores(<?php echo $row_Orden['IdImporte']; ?>);" />
		</td>
	</tr>
	<script>
		$(function(){
			$( "#Imp_FechaValor<? echo $row_Orden['IdImporte']; ?>" ).datepicker({
				defaultDate: "+1w",
				changeMonth: true,
				changeYear: true,
				showOtherMonths: true,
				selectOtherMonths: true,
				showButtonPanel: true,
				showAnim: "clip",
				firstDay: 0
			});
			
		});
	</script>
<?php } while ($row_Orden = mysql_fetch_assoc($Orden)); ?>


</tbody>
</table>
		<input id="add" type="button" value="Añadir Fila" />
        <input id="cantCols" type="text" value="-1" style="display:none" /
		

Código:

<script>

$("#add").click(function() {
	
					
	var filas = $("tr","#TablaOperacionTramo").length;
	
	if($('#cantCols').val()=="-1"){
		$('#cantCols').val(parseInt(filas)-1);
	} else {
		$('#cantCols').val(parseInt($('#cantCols').val())+1);	
	}
					
	n0 = $('#cantCols').val();
	n1 = $('#cantCols').val()+"i";
	
	var valorHTML = '<tr style=\'cursor:pointer\'>  <td id="columna1fila'+n0+'" ><input id="Imp_CodigoProyecto\'+n1+\'" class="TextoEdit" onchange="reflejoCambioValores(\'+n1+\');"  /> </td><td id="columna2fila'+n0+'" ><input id="Imp_FechaValor\'+n1+\'" class="TextoEdit" readonly="readonly" style="width:130px" onchange="reflejoCambioValores(\'+n1+\');" /></td></tr>';
	
	$("#TablaOperacionTramo").append(valorHTML);
	
});

</script>

[Rosencrantz]

Debes tener en cuenta que cuando creas dinamicamente un elemento HTML ya sea por ajax o haciendo append, prepend etc con jquery los elementos aparecen "muertos" por lo cual no se les activa ninguna funcionalidad o evento definido en jquery, existen métodos que trae jquery para esto como live() o delegate() pero infortunadamente estos elementos no aplican a tu caso porque se activan para un evento del usuario en si como un click o mouseover pero no para el evento de "aparecer" en la pagina e implementar el datepicker (al menos no lo conozco.).
La única opción que veo es usar un plugin llamado livequery() con el cual puedes "revivir" elementos que no están sujetos a ningún evento como por ejemplo recibir un datepicker en un campo.
Cuando los elementos que aparezcan en la pagina esten sujetos a eventos como clicks, focus etc usa los nativos live() o delegate() (es preferible el segundo), cuando aparezcan y deban tener por ejemplo un datepicker asociado el cual no se activa por evento del usuario entonces usa el livequery.


http://brandonaaron.net/code/livequery/docs

Espero te sirva la info, saludos.