Question

我正在尝试在表单元素被赋予焦点时隐藏页脚。我还想在表单元素失去焦点时显示页脚，模糊事件应该处理它。我无法在jQuery Mobile selectmenu表单元素上触发焦点或模糊事件。

以下是我的一个表单元素的示例 -

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

这是jQuery代码，它应该隐藏我的页脚在焦点上并在模糊处显示它（它在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
  });

奇怪的是，更改事件处理程序会触发但焦点和模糊不会触发。

我在下面尝试了这个并且它不起作用 -

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

我也试过了 -

   $('.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 - 我在http://jquerymobile.com/test/docs/forms/selects/events.html检查了jQuery Mobile selectmenu文档，与谷歌交谈，在这里搜索，但找不到这个问题。< / p>

Answer 1

这最终为我工作。

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
}

我在堆栈上遇到过这个问题 - Show hide keyboard is not working propery in android phonegap并注意到有两个你可以听的事件。

Answer 2

尝试注释焦点事件并尝试..有时当焦点事件触发时会多次触发，因为您没有看到执行的代码......

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

Answer 3

使用以下示例对我有用：

<强> 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>

其中#my_footer是我的页脚的ID（请查看下面的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>

您可以尝试这个示例，看看这是否适合您：S

希望这会有所帮助。让我知道你的结果。

jQuery Mobile selectmenu焦点和模糊事件不会触发

3 个答案: