Hola estoy creando un menú usando jquery ui, al cargarse la pagina primero se eejcuta la función crealista() que crea la lista (A,B) que serán los componentes del menu, en seguida en $function() se trata de acceder al eleemnto DOM que cree dinámicamente en la función crealista() que es “mlista” y se aplica sobre el la función menu() de jquery ui para que la lista se comporte como un menu. El problema es que cuando se trata de acceder al elemento menlist ya se cargaron con anterioridad los elementos DOM, por lo tanto ya no me lo reconoce al invocarlo. ¿Cómo puedo hacer esto para que me lo reconozca?
.
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prueba</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
crealista();
});
$(function(){
$("#mlista").menu();
});
function crealista(){
var letras = ['A', 'B'];
letra = $('<ul id="mlista">');
$("#cat").append(letra);
letraActual = $('<li ><a href="#">' + letras[0] + '</a></li>');
letraActual.data("letra",letras[0]);
$("#cat").append(letraActual);
letraActual = $('<li><a href="#">' + letras[1] + '</a></li>');
letraActual.data("letra",letras[1]);
$("#cat").append(letraActual);
letraActual = $('/<ul>');
$("#cat").append(letraActual);
}
</script>
</head>
<body>
<div id="cat">
</div>
</body>
</html>