jQuery Mobile selectmenu focus e blur non si attivano

Question

Sto tentando di nascondere un piè di pagina quando un elemento del modulo ha lo stato attivo. Voglio anche mostrare un piè di pagina quando un elemento del modulo perde il focus, che l'evento di sfocatura dovrebbe gestire. Non riesco a far scattare l'evento di messa a fuoco o sfocatura su un elemento del modulo di scelta rapida jQuery Mobile.

Ecco un esempio di uno dei miei elementi del modulo -

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

Ecco il codice jQuery che dovrebbe nascondere il mio piè di pagina sulla messa a fuoco e mostrarlo sulla sfocatura (è all'interno DOM pronto) -

$('.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 
    }); 

e 'strano che l'evento change incendi gestore ma attenzione e sfocatura non lo faranno.

Ho provato questo qui sotto e non funzionerà -

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

Ho anche provato questo -

$('.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 
    }); 

Ho anche provato il focusIn() e focusOut() eventi senza fortuna o. Ho provato decine di selettori (div.ui-select era uno di questi). Non penso che sia un problema con il selettore che sto usando.

Sto usando jQuery Mobile 1.1.0 e jQuery 1.7.1 - Ho controllato la documentazione del menu di selezione di jQuery Mobile al numero http://jquerymobile.com/test/docs/forms/selects/events.html, ho parlato con Google, cercato qui e non riesco a trovare questo problema.

Answer 1

Questo è quello che ha funzionato per me.

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 
} 

mi sono imbattuto in questo qui sulla pila - Show hide keyboard is not working propery in android phonegap e notato che ci sono quei 2 eventi si può ascoltare per.

Answer 2

Provare a commentare l'evento fuoco e provare .. A volte, quando l'evento di messa a fuoco incendi si è sparato più volte a causa del quale non si vede il codice che viene eseguito ...

$('.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"); 
    });​ 

ho commentato l'evento fuoco e gli altri due eventi sembrano al fuoco .. Rimuovere i commenti e si vede l'evento attenzione essere licenziato più volte ..

check FIDDLE

Answer 3

Questo ha funzionato per me utilizzando il seguente indirizzo e xample:

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> 

dove #my_footer è l'ID del mio piè di pagina (controllare il HTML sottostante).

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> 

Si può avere una prova in questo esempio e vedere se questo funziona per voi mate: S

Spero che questo aiuti. Fammi sapere i tuoi risultati.