Question

我正在尝试创建一个可显示移动设备的小型辅助导航栏。它最终会根据点击的链接显示和隐藏特定的div。我正在使用颜色更改作为测试，以查看是否所有内容都正确调用。颜色更改在桌面浏览器上正常工作，但在智能手机上则无效。

在这里寻求建议后，我尝试了“委托”而没有成功。我相信live（）无论如何都更适合表演/隐藏功能。我能找到的其他建议似乎与这种情况无关。我尝试过使用preventDefault方法而不是返回false，虽然我不清楚两者之间的实际差异，但两者都没有用。

我是一名设计师，而不是开发人员，并且对jquery很新，尽管我对基本的编码术语和最佳实践有点熟悉。

$('#nav2 a').unbind("click");

$('#nav2 a').live('click',function(){
    $(this).css('color','#F00');
    return false;
});

HTML代码如下所示：

<div id="nav2"><p><ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#" class="smOnIssue">In This Issue</a></li>
    <li><a href="#" class="smFeatures">Features</a></li>
    <li><a href="#" class="smArchive">Archive</a></li>
</ul></p></div>

正如我所说，它在桌面上运行良好，但移动设备什么都不做。我正在使用最新版本的jquery。谢谢！我非常感谢你能给我的任何帮助。

Answer 1

“从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来实现附加事件处理程序。旧版jQuery的用户应该使用 .delegate（）优先于.live（）。“

Answer 2

您是否尝试将代码放在pageinit中 - 这相当于document.ready function http://jquerymobile.com/test/docs/api/events.html。这听起来是因为它没有绑定click事件处理程序的原因是因为该元素在dom中不可用

$(document).bind('pageinit',function(){
    $('#nav2 a').live('click',function(){
        $(this).css('color','#F00');
        return false;
    });
})

从我上面链接的jquerymobile文档

重要提示：使用$（document）.bind（'pageinit'），而不是$（document）.ready（）

你在jQuery中学到的第一件事就是在$（document）.ready（）函数中调用代码，这样一旦加载了DOM，一切都会执行。但是，在jQuery Mobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，而DOM ready处理程序仅针对第一个页面执行。要在加载和创建新页面时执行代码，您可以绑定到pageinit事件。此事件在本页底部详细说明。

重要：$（文件）.bind（'pagecreate'）vs $（文件）.bind（'pageinit'）

在Beta 2之前，对希望操作jQuery Mobile增强页面和子窗口小部件标记的用户的建议是绑定到pagecreate事件。在Beta 2中，通过绑定到pagecreate事件来代替直接调用窗口小部件方法，进行内部更改以分离每个窗口小部件。结果，绑定到mobileinit中的pagecreate的用户将在每个插件增强标记之前发现它们的绑定。为了与jQuery UI Widget Factory的生命周期保持一致，在create方法之后调用初始化方法，因此pageinit事件为DOM和/或Javascript对象的post增强操作提供了正确的时间。简而言之，如果您之前使用pagecreate在页面显示之前操作增强型标记，则很可能您希望迁移到“pageinit”。

Answer 3

如果您要分离与.live()相关联的活动，则应使用.die() 你试过'tap'而不是'click'事件吗？

Answer 4

您只需将onclick =“”添加到要在移动浏览器上触发的元素。

<div id="nav2" onclick=""><p><ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#" class="smOnIssue">In This Issue</a></li>
    <li><a href="#" class="smFeatures">Features</a></li>
    <li><a href="#" class="smArchive">Archive</a></li>
</ul></p></div>

在桌面上工作（“点击”），但不在移动浏览器上工作

4 个答案: