jQuery Mobile 选择菜单焦点和模糊事件不会触发答案

【问题标题】：jQuery Mobile selectmenu focus and blur event won't firejQuery Mobile 选择菜单焦点和模糊事件不会触发
【发布时间】：2012-09-21 05:52:23
【问题描述】：

当表单元素获得焦点时，我试图隐藏页脚。我还想在表单元素失去焦点时显示页脚，模糊事件应该处理。我无法在 jQuery Mobile 选择菜单表单元素上触发焦点或模糊事件。

这是我的表单元素之一的示例 -

<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 选择菜单文档，与 google 交谈，在此处搜索，但找不到此问题。

【问题讨论】：

嘿伙计，你的更改方法$('.selectList').change至少有效吗？

标签： jquery html cordova jquery-mobile

【解决方案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 并注意到你可以监听这 2 个事件。

【讨论】：

【解决方案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");
  });

我注释掉了焦点事件，其他两个事件似乎触发了.. 移除 cmets，您会看到焦点事件被多次触发..

查看FIDDLE

【讨论】：

感谢您的建议。不幸的是，模糊事件不会触发。我需要以某种方式知道何时出现 android 键盘，这可以通过表单元素上的焦点和模糊事件处理程序来实现。

【解决方案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

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

【讨论】：

非常感谢您的帮助。不过，再一次，只有更改事件想要触发。不过我想出了一个解决方案，我将发布对我有用的方法。
欢迎您的伙伴 :)。我很想知道问题出在哪里：S...我会等待您的解决方案：P
我必须再等 5 个小时才能自行回答，因为我的声望不到 10。我明天把它贴在这里。再次感谢您。