jQuery Mobile selectmenu focus and blur event won't fire

Question

I am trying to hide a footer when a form element is given focus. I also want to show a footer when a form element loses focus, which the blur event should handle. I can't get the focus or blur event to fire on a jQuery Mobile selectmenu form element.

Here is an example of one of my form elements -

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

Here is the jQuery code that is supposed to hide my footer on focus and show it on blur (it is inside DOM ready) -

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

It is strange that the change event handler fires but focus and blur will not.

I have tried this below and it won't work -

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

I also tried this -

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

I also tried the focusin() and focusout() events with no luck either. I tried dozens of selectors (div.ui-select was one of them). I don't think it is an issue with the selector I am using.

I am using jQuery Mobile 1.1.0 and jQuery 1.7.1 - I have checked the jQuery Mobile selectmenu documentation at http://jquerymobile.com/test/docs/forms/selects/events.html, talked to the google, searched here, and can't find this issue out.

Answer 1

This is what ended up working for 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
}

I came across this here on stack - Show hide keyboard is not working propery in android phonegap and noticed there are those 2 events you can listen for.

Answer 2

Try commenting out the focus event and try.. Sometimes when the focus event fires it is fired multiple times because of which you don't see the code that is executed...

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

I commented out the focus event and the other two events seem to fire.. Remove the comments and you see the focus event getting fired multiple times..

Check FIDDLE