jQuery Mobile selectmenu foco y desenfoque evento no se disparará

Question

Estoy tratando de ocultar un pie de página cuando se le da un foco a un elemento de formulario. También quiero mostrar un pie de página cuando un elemento de formulario pierde el foco, que debe manejar el evento de desenfoque. No puedo hacer que el evento de desenfoque o enfoque se active en un elemento de formulario de menú de jQuery Mobile.

Aquí es un ejemplo de uno de mis elementos de formulario -

<select id="radiology-study-provider" class="selectList"></select> 

Este es el código jQuery que se supone que ocultar mi pie de página en el enfoque y mostrarlo en la falta de definición (que está dentro de DOM listo) -

$('.selectList').change(function(){ 
     console.log("the change event is firing"); 
    }); 
    $('.selectList').focus(function(){ 
     $('div:jqmData(role="footer")').hide(); // hide the footer 
    }); 
    $('.selectList').blur(function(){ 
     $('div:jqmData(role="footer")').show(); // show the footer 
    }); 

Es extraño que el controlador de eventos de cambio se dispare pero el enfoque y el desenfoque no.

He intentado esto más adelante y no va a trabajar -

$('.selectList').on('focus', function(){ 
     $('div:jqmData(role="footer")').hide(); // hide the footer 
    }); 
    $('.selectList').on('blur', function(){ 
     $('div:jqmData(role="footer")').show(); // show the footer 
    }); 

También probé esto -

$('.selectList').bind("focus", function(event, ui) { 
     $('div:jqmData(role="footer")').hide(); // hide the footer 
    }); 
    $('.selectList').bind("blur", function(event, ui) { 
     $('div:jqmData(role="footer")').hide(); // hide the footer 
    }); 

También probé el focusin() y focusOut() eventos sin suerte ya sea. Intenté docenas de selectores (div.ui-select fue uno de ellos). No creo que sea un problema con el selector que estoy usando.

Estoy usando jQuery Mobile 1.1.0 y jQuery 1.7.1 - He comprobado la documentación del menú de selección de jQuery Mobile en http://jquerymobile.com/test/docs/forms/selects/events.html, hablé con google, busqué aquí, y no puedo encontrar este problema.

Answer 1

Esto es lo que terminó trabajando para mí.

document.addEventListener("deviceready", onDeviceReady, false); 

function onDeviceReady() { 
    document.addEventListener("hidekeyboard", onKeyboardHide, false); 
    document.addEventListener("showkeyboard", onKeyboardShow, false); 

} 

function onKeyboardHide() { 
    $('div:jqmData(role="footer")').show(); // show the footer 
} 

function onKeyboardShow() { 
    $('div:jqmData(role="footer")').hide(); // hide the footer 
} 

me encontré con este aquí en la pila - Show hide keyboard is not working propery in android phonegap y notamos que hay esos 2 eventos se pueden detectar.

Answer 2

Intente comentar el caso de enfoque y tratar .. A veces, cuando el evento se dispara enfoque se dispara varias veces debido a lo cual no se ve el código que se ejecuta ...

$('.selectList').change(function(){ 
     alert("the change event is firing"); 
    }); 

// $('.selectList').focus(function(){ 
// $('div:jqmData(role="footer")').hide(); // hide the footer 
// alert("Focus event is firing"); 
// }); 

    $('.selectList').blur(function(){ 
     //$('div:jqmData(role="footer")').show(); // show the footer 
     alert("Blur event is firing"); 
    });​ 

Comenté el evento enfoque y los otros dos acontecimientos parecen disparar .. Quitar los comentarios y ver el evento de foco conseguir disparó varias veces ..

Comprobar FIDDLE

Answer 3

Esto funcionó para mí utilizando el siguiente correo jemplo:

JS:

<script> 
    document.addEventListener("deviceready", function(){}, false); 

    $(function() { 
     $('.selectList').change(function(){ 
      console.log("the change event is firing");          
     }); 

     $('.selectList').focus(function(){ 
      console.log("FOCUS"); 
      $('#my_footer').hide(); // hide the footer 
     }); 

     $('.selectList').focusout(function(){ 
      console.log("FOCUS OUT"); 
      $('#my_footer').show(); // show the footer 
     }); 
    }); 
</script> 

donde #my_footer es el ID de mi pie de página (comprobar el HTML).

HTML:

<body> 
    <div data-role="page"> 
     <div data-role="content"> 

      <select id="radiology-study-provider" class="selectList"> 
       <option value="1">A</option> 
       <option value="2">B</option> 
       <option value="3">C</option> 
      </select> 

     </div> 
    </div> 
</body> 

Es posible que haya un intento en este ejemplo y ver si esto funciona para usted mate: S

Espero que esto ayude. Déjame saber acerca de tus resultados.