我的jQuery移动应用程序中有两个页面。当点击第一页上的列表项时，用户将被带到第二个html页面。第二页有一个导航栏，有两个按钮。我希望这两个导航栏按钮显示/隐藏页面内容区域中的div。我找不到使用哪种事件处理机制。 document.ready不起作用，pageinit也不起作用。有人可以指导我一个样品吗？
答案 0 :(得分：7)
如果你的意思是你有两个（或更多）单独的HTML文件，你需要了解如何在jQM中正确处理事件，所以这里有一个快速介绍。
jQM将单独的HTML文件添加到单个DOM中，通过AJAX加载它们
通过AJAX加载的每个页面都会触发pageinit和pageshow事件，不同之处在于当您导航回页面时页面显示会重新触发
第一页后面的每个页面只会加载<div data-role="page/dialog"></div>元素中的内容，因此，如果您的后续页面中<head/>中的JS没有被拉入，那么您可能已经拥有了第二页的第二页的导航栏JS代码，这是一件值得注意的事情
那么你如何管理你的JS并保持井井有条？在我们的jQM生产应用程序中，我们在开始时加载了所有的JS，不管怎样它都不会太大。我们有一个入口点，每个页面都包含JS代码，因此您输入的任何页面都会加载我们只需要一次的所有JS - 并且不再加载JS。 警告如果您的<div data-role="page"/>内有JS，则每次访问该页面时都会重新启动只有在您了解其行为时才会这样做
您的入口点应该是单个函数$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){现在每个加载的页面/对话框都会触发此事件处理程序，您可以根据它来确定它是pageinit还是pageshow event.type和通过向<div data-role="page" data-pageIdentifier="home etc.."></div>添加数据属性或类或任何您想要的任何内容来加载哪个页面 - 然后只需使用switch语句来处理所有情况。
您现在拥有了所需的所有信息，this是对当前页面的方便引用，使用.on函数绑定事件监听器，因此您可以在页面上收听，而不是文档根，例如你的导航栏东西。 - 如果你使用.live它将监听整个文档（虽然不是所有页面都是DOM缓存的），不管这对性能有害！ 实际上，在页面中，我们始终从页面开始使用.find，例如$ this.find（'div.something'），我们从不使用$（'div.something），它会抓取你的整个DOM，可能会撞到其他页面，更糟糕的是会给你错误的结果，而不是你当前的页面，所以另一个最大的错误就是做$('img.selectItem').bind('click'...这样的事情，你可能在另一个DOM缓存页面中有一个img.selectItem，所以你会绑定到比你想要的更多 - 我会做类似$this.find('img.selectItem').bind( 的事情（其中$这是当前页面）
显然我们最终有很多代码，所以我们写了一个在其他JS文件中调用函数的处理程序对象 - 你可以使用RequireJS但我们从不需要
答案 1 :(得分：0)
检查此jsfiddle上的代码：http://jsfiddle.net/nirmaljpatel/6UbGp/