Saludos a los foreros, paso a explicar mi problema:
Tengo un input que valida su valor mediante el evento onBlur. Los valores que puede coger este input vienen definidos por una lista devuelta por una respuesta AJAX, lo que se conoce comunmente como una lista de opciones para el autocompletado. Los elementos de la lista devuelta por AJAX tienen una funcion jQuery, concretamente la ".on('click', ..)", que se encarga de enviar el valor de la lista clicado al input que he mencionado al principio y de comprobar si el valor es correcto.
El problema surge cuando, al desplegarse la lista de opciones, clico en una de las opciones para seleccionarla. El input pierde el FOCO y se ejecuta el onBlur, pero las acciones descritas dentro de la funcion ".on('click', ..)" no se ejecutan, dando lugar a una comprobación erronea. Lo curioso es que cuando intento clicar sobre el valor de la lista por segunda vez, entonces sí que funciona.
¿Hay alguna manera de evitar que el foco del input se vaya, para así evitar la ejecución de la comprobación? ¿La funcion ".on.." no funciona con elementos dinámicos?¿Puede que hasta el segundo clic no se cargue correctamente jQuery?
Se que el problema debe ser que el <ul> que viene del AJAX es dinámico y no ejecuta bien la funcion ".on..", pero según los tutoriales y demás foros, esta función es la adecuada para tratar con contenido asíncrono.
Llevo atascado ahí durante horas y me está poniendo de los nervios. He buscado en internet y leído tutoriales sobre el orden de los eventos, pero nada. Necesito ayuda, por favor. Gracias de antemano.
Código HTML:
Ver original <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)"> <div id="respuesta-ajax"> Aquí viene, por AJAX, la lista de opciones para autocompletar el input
<script type="text/javascript" > function ajaxListaAutocompletar(){
var ajax=nuevoAjax();
var respuesta=document.getElementById('respuesta-ajax');
ajax.onreadystatechange=function() {
if (ajax.readyState==1){
// Mientras carga...
}
if (ajax.readyState==4){
respuesta.innerHTML=ajax.responseText;//
$('#id_li-respuestas').on('click', function(){
// funcion que pone el texto en input
var selectItem = function(that){
$(that).parent().parent().parent().find('input').val($(that).find('b').html());
// Borro el cuadro de autocompletar
$(that).parent().remove();
// Compruebo
compruebaValor('autocompletar');
$('#autocompletar').focus();
$('#autocompletar').blur();
};
selectItem(this);
});
}
}