Geek asks and answers

JQuery Mobile selectmenu focus and blur event not firing

I am trying to hide the footer when the form element is given focus. I also want to show the footer when the form element loses focus, which should handle the blur event. I cannot get a focus or blur event to trigger a jquery Mobile selectmenu 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 should hide my footer in focus and show it with blur (it is inside the DOM) -

  $('.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 tried this below and it will not 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
  });

focusin() focusout() . ( div.ui-select). , , .

jQuery Mobile 1.1.0 jQuery 1.7.1. jQuery Mobile selectmenu http://jquerymobile.com/test/docs/forms/selects/events.html, Google, .

+5
3

.

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
}

, - , Android. , 2 , .

+4

. , , , - , ...

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

, , , . , , .

FIDDLE

+1

This worked for me using the following example:

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>

where #my_footeris the id of my footer (see HTML below).

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>

You may have a try in this example and see if this works for you: S

Hope this helps. Let me know about your results.

+1
source

More articles:


All Articles