[SOLUCIONADO] Validación de valores devueltos por AJAX mediante onBlur

[thorstorm]

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:

<div>
   <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
   </div>
</div>
 
<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);
                 }); 
        }
}
</script>
 

[thorstorm]

No tenéis por qué darme la respuesta correcta solamente. Si tenéis alguna sugerencia de cómo solucionarlo o alguna idea, por rara que pueda ser, comentadla por favor. Nunca se sabe lo que me puede llevar a mi o a alguien a solucionarlo..

Gracias

[thorstorm]

Después de batallar con el problema durante estos días he conseguido arreglarlo. No sé si es la forma más elegante de resolverlo, pero al menos he conseguido que realice su función de la manera que necesito.

Estas dos maneras son equivalentes:

Código Javascript:

<div id="contenedor">
   <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
   <div id="respuesta-ajax">
      <ul>
         <li id="listado"></li>
      </ul>
   </div>
</div>
 
<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;
        
              $('#contenedor').on('mousedown', '#listado', function(){
                 var that=$(this);
                // 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();
                  };
        
                 selectItem(that);
              }); 
           }
}
</script>
 

Código Javascript:

<div id="contenedor">
   <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
   <div id="respuesta-ajax">
      <ul>
         <li id="listado"></li>
      </ul>
   Aquí viene, por AJAX, la lista de opciones para autocompletar el input
   </div>
</div>
 
<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;
           }
}
$(document).ready(function(){
            $('#contenedor').on('mousedown', '#listado', function(){
                 var that=$(this);
                // 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();
                  };
        
                 selectItem(that);
              }); 
});
</script>
 

Explicación: Me di cuenta de que el foco se iba del input, ejecutando el onBlur, cuando soltaba el botón del ratón. Ejecutándolo en base al 'mousedown' ya no hace falta la comprobación del valor dentro de la función. Aclarar que en la función '.on(...', cuando se define para eventos que se propagan, debe indicarse dónde se quiere originar el evento (#listado) y hasta dónde se puede propagar (#contenedor).

¡A los usuarios que entiendan español!