Tengo un slider html5 de imágenes en una página php, donde dentro de su etiqueta ul se crean de forma dinámica los tag Li con su contenido, que son imágenes extraídas de la base de datos, esto es realizado mediante una consulta ajax que envía una primary key al controlador que se comunica con el modelo donde retorna un array al succes de la petición Ajax, luego creo los tag li del slider con for each y los agrego al tag ul gracias a su id con append. Esto funciona sin problemas cuando la consulta ajax es ejecutada en forma directa sin document.on ready dentro de la etiqueta script, pero al momento de agregar la sentencia ajax dentro de una función on click activada por un botón, el algoritmo no se ejecuta de forma satisfactoria.
Por conclusión: la función ajax funciona en el mismo instante en que se carga el DOM que contiene la estructura base del slider , por lo tanto la petición post de ajax no alcanza a regresar al mismo tiempo, por lo que imprime las etiquetas li retrasadas no logrando visualizar las fotos. Que me sugieren para poder lograr que el slider sea activado mediante un botón en la misma página extrayendo las imágenes de la base de datos con la variable enviada en el data de Ajax? Adjunto codigo:
<script>
$("#btn_verFotos").on("click", function(){
$.ajax({
type:"POST",
url:"controlador.php",
dataType:"JSON",
data:{pkcasa:'42'},
success:function(data){
$.each(data.mensaje, function(i, item){
//console.log(item);
var valorUl = $("#unUl").append();
$("#unUl").append(valorUl + "<li><a href='images/"+item.foto+"'></a><div class='caption'>Houses</div></li>");
});
},
beforeSend:function(){
},
complete:function(){
}
});
});
</script>
<body>
<div id="slider">
<div class="slider-two">
<ul id="unUl">
</ul>
<div class="icon" title="Expandir/Salir"></div>
</div>
</div>
<button type="button" id="btn_verFotos">Ver Fotos</button>
</body>