实时("点击")在桌面上工作，但不在移动浏览器上工作

Question

我正在尝试创建一个小型辅助导航栏，用于显示移动设备。它最终会根据点击的链接显示和隐藏特定的div。我用颜色的变化来测试是否一切都正常。这种颜色变化在桌面浏览器上运行良好，但在智能手机上则不然。

在这里寻找建议后，我尝试过"委派"，但没有成功。不管怎样，我相信live（）对于show/hide函数来说是更好的。我能找到的其他建议似乎都与这种情况无关。我尝试过使用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的用户应该使用.delete（）优先于.live（）。"

Answer 2

您是否尝试过将代码放入pageinit中，这相当于document.ready函数http://jquerymobile.com/test/docs/api/events.html.听起来它没有绑定点击事件处理程序的原因是因为元素在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后立即执行所有内容。然而，在jQueryMobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，并且DOM就绪处理程序仅对第一个页面执行。要在加载和创建新页面时执行代码，可以绑定到pageinit事件。本页底部将对此事件进行详细解释。

重要提示：$（document）.bind（'pagecreate'）与$

在Beta 2之前，建议希望操作jQuery Mobile增强型页面和子窗口小部件标记的用户绑定到pagecreate事件。在Beta 2中，进行了内部更改，通过绑定到pagecreate事件来解耦每个小部件，而不是直接调用小部件方法。因此，绑定到mobileinit中pagecreate的用户会发现他们的绑定在每个插件增强标记之前就已经执行了。为了与jQueryUIWidgetFactory的生命周期保持一致，初始化方法在create方法之后调用，因此pageinit事件为DOM和/或Javascript对象的增强后操作提供了正确的时间。简而言之，如果您以前在显示页面之前使用pagecreate来操作增强的标记，那么很可能需要迁移到"pageinit"。

Answer 3

如果要分离附加有.live()的事件，则应使用.die()你尝试过用"点击"而不是"点击"事件吗？

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>