jQuery - Agregar elementos despues del document ready

[GonzaloOrtellado]

Hola, estoy teniendo problemas con un proyecto. El sitio web que estoy diseñando cuenta con un menu de datos historicos de consultas. Al llamar a la pagina la primera vez se carga el historico sin problemas.

El menu que estamos utilizando para este historico de consultas tiene aplicado un class="dialogBox" (esta clase tiene asociada archivos tanto css como js) que lo que hace es lo siguiente: al hacer click en un link del menu, en lugar de abrirse una nueva pagina, aparece un pequeño cuadro de dialogo con su propio estilo. Una vez guardados los datos que estan dentro del cuadro de dialogo, es necesario que el nuevo historico se aparezca en el menu de historicos. Hasta ahora logre que la nueva linea sea insertada, pero el problema es el siguiente:

La nueva opcion del menu no esta ligada al class = "dialogBox", por lo que al hacer click en el nuevo enlace te lleva a una pagina nueva en lugar de abrir el cuadro de dialogo estilizado.

Estuve leyendo varios foros jquery y según entiendo es porque la nueva linea se carga despues del document ready. Y la solución propuesta es utilizar la función .on() (estoy utilizando jQuery 1.7.1). Sin embargo pasa lo mismo, logro insertar la nueva fila pero al hacer click en la nueva opcion no toma la clase = "dialogBox".

Les dejo parte del codigo:

Codigo jQuery:
***********

(la función se activa con el evento click de un button dentro del formulario)

$("#menuAntropometricoEvaluacion").on("click", function(){
$(this).after('<li><a class="dialogBox" href="evaluacionAntropometrica.php?idEvaluacionAnt ropometrica=A">Nueva Evaluacion</a></li>');
});

Codigo Html:
***********

<div class="demo-dd demo-container">

<ul id="drilldown-3">

<li><a href="#"><span class="capital">A| </span>Antropom&eacute;tricos</a>

<ul id ="prueba">
<li><a href="#">Evaluaci&oacute;n Antropom&eacute;trica</a>
<ul id="menuAntropometricoEvaluacion">
<?php //include "helpers/cargarMenuAntropometricoEvaluacion.php"; ?>
<li id="liPrueba"><a class="dialogBox" href="evaluacionAntropometrica.php?idEvaluacionAnt ropometrica=A">Nueva Evaluacion</a></li>
</ul>
</li>
<li><a href="#">Medici&oacute;n Antropom&eacute;trica</a>
<ul id="menuMedicionAntropometrica">
<li><a class="sticky" title="Martes 16/11/2011" href="consulta2.php" rel="consulta2.php">Martes 16/11/2011</a></li>
</ul>
</li>


</ul>

</li>

<li><a href="#"><span class="capital">B| </span>Bioqu&iacute;micos</a>
<ul>
<li><a href="#">An&aacute;lisis</a>
<ul>
<li><a href="dietaDiaria.php" class="dialogBox">Dieta 1</a></li>
</ul>
</li>
<li><a href="#">Im&aacute;genes de An&aacute;lisis</a></li>


</ul>
</li>
<li><a href="#"><span class="capital">C| </span>Cl&iacute;nicos</a>
<ul>
<li><a href="#">Datos Laborales</a>
<ul>
<li><a href="dietaDiaria.php" class="dialogBox">Dieta 1</a></li>
</ul>
</li>
<li><a href="#">Consultas</a>
<ul>
<li id="menuClinicoConsulta"></li>
</ul>
</li>
<li><a href="#">Anamnesis</a></li>
<li><a href="#">Medicaci&oacute;n</a></li>
<li><a href="#">Antecedentes Cl&iacute;nicos</a></li>
<li><a href="#">Historial de R&eacute;gimen Alimentario</a></li>
<li><a href="#">Reportes</a></li>
</ul>
</li>
<li><a href="#"><span class="capital">D| </span>Diet&eacute;ticos</a>
<ul>
<li><a href="#">Dieta del Paciente</a>
<ul>
<li><a href="dietaDiaria.php" class="dialogBox">Dieta 1</a></li>
</ul>
</li>
<li><a href="#">Registro de Ingesta</a></li>
<li><a href="#">Datos Alimenticios</a></li>
<li><a href="#">H&aacute;bitos de Salidas y Compras</a></li>
<li><a href="#">C&aacute;lculo de Porciones</a></li>
<li><a href="#">No Consume</a></li>
</ul>
</li>
<li><a href="#"><span class="capital">E| </span>Entrenamiento</a>
<ul>
<li><a href="#">Actividad F&iacute;sica</a></li>
</ul>
</li>

</ul>

</div>

[maycolalvarez]

efectivamente, ése nuevo contenido agregado dinámicamente carece de los eventos previamente definidos en el onready, porque en ese momento no era parte del DOM.

la solución como comentas, es agregar el evento una vez añadidos esos elementos al DOM, una forma de hacerlo es la que intentas y la otra con jQuery.live()