1

我正在尝试创建一个小型辅助导航栏，它将显示在移动设备上。它最终会根据点击的链接显示和隐藏特定的 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。谢谢！我真的很感激你们能给我的任何帮助。

4

4 回答 4

0

“从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。”

于 2012-08-27T22:05:06.640 回答
0

如果你想分离一个附加的事件，.live()你应该使用.die() 你尝试过“tap”而不是“click”事件吗？

于 2012-11-13T14:58:19.400 回答
0

您是否尝试将代码放在 pageinit 中 - 这相当于 document.ready 函数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 doc

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

在 jQuery 中学习的第一件事是调用 $(document).ready() 函数中的代码，以便在加载 DOM 后立即执行所有内容。但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅针对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。此事件在本页底部有详细说明。

重要： $(document).bind('pagecreate') 与 $(document).bind('pageinit')

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

于 2012-08-27T23:24:37.497 回答
0

您所要做的就是将 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>
于 2013-08-24T23:02:38.820 回答