jQuery Mobile是我新的项目中【原创不易，请尊重版权】【转载请注明来源】要用到的移动端框架，之所以要使用它，仅仅【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】是因为它的兼容性很好，页面之间的轮转及其本文版权归作者所有，未经授权不得转载。【作者：唐霜】优雅。但是jQuery Mobile的U【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。I我并不喜欢，因此又引入bootstra【原创内容，转载请注明出处】【原创不易，请尊重版权】p。在开发中发现，因为JQM采用ajax原创内容，盗版必究。【原创不易，请尊重版权】的方法加载链接到的页面，所以无法像我们之未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net前的设计一样，把不同页面的脚本放在hea本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。d之间，即使将这些脚本转移到body之间原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，也可能造成一些代码无法执行。本文简单的【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net提几个我自己开发中遇到的情况。

【转载请注明来源】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【转载请注明来源】

框架的init初始事件【版权所有，侵权必究】

本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

使用jquery的习惯就是$(docum【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ent).ready开头，然而这在jqm【未经授权禁止转载】【版权所有，侵权必究】中行不通，因为ready事件只执行一次。【转载请注明来源】本文版权归作者所有，未经授权不得转载。当你打开一个URL时，jqm拦截了jqu著作权归作者所有，禁止商业用途转载。【作者：唐霜】ery的ready事件，在ready之前【作者：唐霜】【关注微信公众号：wwwtangshuangnet】要执行一大通，其中主要的是mobilei著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。nit事件。因此，如果对mobile的一著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】些核心配置，应该放在mobileinit【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。事件钩子中。

原创内容，盗版必究。未经授权，禁止复制转载。【原创不易，请尊重版权】

$(document).on('mobileinit', function() {
  $.mobile.pageLoadErrorMessage = "加载出错了！"
})

但是有一个非常重要的点是，mobilei本文版权归作者所有，未经授权不得转载。【转载请注明来源】nit之后DOM还没有加载完，因此如果你【本文受版权保护】【本文首发于唐霜的博客】把对DOM的操作放在mobileinit【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】事件钩子中的话，是没有用的，比如说app【原创不易，请尊重版权】【原创不易，请尊重版权】end、remove等。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】

ready事件发生在DOM刚刚加载完的时【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。候，这个时候基本上各种操作都可以做了。如【转载请注明来源】转载请注明出处：www.tangshuang.net果你的移动端web用了jqm，你要记住，【本文受版权保护】著作权归作者所有，禁止商业用途转载。点击一个链接虽然URL变化了，看到的页面未经授权，禁止复制转载。【未经授权禁止转载】也变化了，但是ready事件早都执行完毕本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】了，所以不会再执行ready事件了，除非未经授权，禁止复制转载。【本文受版权保护】再刷新一下页面。如果你通过审查元素查看，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net可以发现，加载的页面其实是将链接指向的页【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net面的body内容抓取过来，放在一个div【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 data-role=’pa转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ge’中，把前面的一个页面隐本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。藏起来。所以实际上很简单，如果你在rea转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】dy中使用了on或者古老的live等函数本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。来绑定新事件，还是可以的，例如：

原创内容，盗版必究。【本文受版权保护】未经授权，禁止复制转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

$(document).ready(function() {
  $(document).on('click', '.btn', function() {
    alert('ok')
  })
})

上面这段代码中因为使用了on来绑定cli本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ck事件，所以通过ajax加载出来的页面原创内容，盗版必究。【本文首发于唐霜的博客】中的.btn点击时也可以响应。但是有些插未经授权，禁止复制转载。原创内容，盗版必究。件要求在DOM加载时就执行的，那就没有办【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。法了。JQM提供了新的事件来解决这个问题著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】，即pageinit。

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

pageinit发生在通过点击链接加载新【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net页面的时候，因为整个应用都是通过ajax转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net实现的加载，所以当一个新页面打开的时候，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net仅仅是一个DOM append和elem本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ent hide的就可以实现的，要在一个【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】新页面打开的时候执行某个动作怎办呢？靠p【本文首发于唐霜的博客】【本文受版权保护】ageinit。比如你现在有两个页面A、本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】B，同时使用了一个幻灯插件，但是幻灯插件未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。只在ready事件中执行了，入口如果是A【原创不易，请尊重版权】未经授权，禁止复制转载。页面，你进入A时可以看到幻灯，但是点击进【本文受版权保护】【本文首发于唐霜的博客】入B的时候发现幻灯没有加载。这个时候把幻【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。灯的代码放到pageinit事件钩子中。

转载请注明出处：www.tangshuang.net【作者：唐霜】【转载请注明来源】【原创内容，转载请注明出处】未经授权，禁止复制转载。

$(document).on('pageinit',function() {
  flash_set()
})

可是问题还是来了，有的时候即使你在pag【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】einit事件钩子中使用代码也无法执行。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net你是否想起来mobileinit和rea【转载请注明来源】【原创不易，请尊重版权】dy的区别了，前者在DOM加载完之前，后未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】者在DOM刚刚加载完的时候。我们完全可以【本文受版权保护】原创内容，盗版必究。形象的把pageinit比作mobile原创内容，盗版必究。【本文受版权保护】init，那么谁来顶替ready呢？jq【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netm提供了一个pageshow事件，pag【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。eshow则是发生在一个新的页面完全展现著作权归作者所有，禁止商业用途转载。【作者：唐霜】出来之后，这个时候不要说DOM了，基本上本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。可以说是一个页面加载的最后阶段，所以这个【版权所有，侵权必究】【未经授权禁止转载】时候做什么事都可以，包括jqm通过aja本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。x操作新加载进来的DOM。

【版权所有，侵权必究】【本文受版权保护】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】

如何放置你的代码本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【转载请注明来源】【版权所有】唐霜 www.tangshuang.net

通过上面的解说你可能会觉得，全部放在pa转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】geshow里面不就好了么。但事实是没有【本文受版权保护】【未经授权禁止转载】必要每个页面都执行那么多脚本，而且你还要转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】考虑如何把它们安排在不同的页面位置。例如【本文受版权保护】著作权归作者所有，禁止商业用途转载。css，如果你打算直接在某一个页面中使用本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。单独的css，那么不要用link放在he著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】ad之间，因为如果它是被新加载进来的，h【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ead之间的任何代码都不会被加载进来，你【原创不易，请尊重版权】未经授权，禁止复制转载。只能把这堆css放在页面的body中间。

【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【作者：唐霜】【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】

如果你的代码放置的不好，可能导致脚本执行【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】混乱。例如你的HTML元素中在不同的页面【关注微信公众号：wwwtangshuangnet】【转载请注明来源】使用相同的id，就可能因为ajax加载导【本文受版权保护】【原创内容，转载请注明出处】致同一个DOM中出现两个一样的id，导致【本文受版权保护】【作者：唐霜】执行混乱。即使你在新页面中使用了新的ja【本文首发于唐霜的博客】【本文首发于唐霜的博客】vscript代码，也有可能无法执行，例【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net如你希望在新的页面中对提交的表单进行检查【本文受版权保护】本文作者：唐霜，转载请注明出处。，于是在新页面的body中间加入了下面的本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】代码

【本文首发于唐霜的博客】未经授权，禁止复制转载。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net

$('#form').submit(function() {
  ...
})

结果发现根本不执行，原因很简单，subm著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。it事件只有在ready的时候被加入事件【本文受版权保护】原创内容，盗版必究。监听的序列，而新加的js早就过了read本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。y的时间了，因此，上面这段代码应该换为

【本文首发于唐霜的博客】原创内容，盗版必究。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

$(document).on('pageshow', function(){
  $('#form').submit(function() {
    ...
  })
})

页面跳转问题【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net

jqm遇到使用PHP header lo【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netcation做的页面跳转时，就傻了，什么未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】也加载不出来。如果遇到你要页面跳转，我教本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】几个办法，应对你应用中的跳转问题。

本文版权归作者所有，未经授权不得转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【作者：唐霜】

第一种，使用data-ajax=R【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】21;false”取消Aja本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。x页面加载。虽然jqm的页面轮转看上去确著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。实很酷，但在不得已的情况下，只能舍弃了。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。这个时候你必须注意：如果重新执行页面DO【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netM，你新的页面中引入的css、js等能否【作者：唐霜】【版权所有，侵权必究】满足之后打算加载的页面，因为一旦你取消了未经授权，禁止复制转载。未经授权，禁止复制转载。Ajax，就相当于换了一个入口页面，网页【转载请注明来源】转载请注明出处：www.tangshuang.net的标题变了，加载的文件也变了。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。未经授权，禁止复制转载。【转载请注明来源】

第二种，通过PHP判断，在不同的情况下显原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net示不同的链接。例如需要用户登录的页面，有著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。些页面必须用户登录了才能看，可以用PHP【本文首发于唐霜的博客】【版权所有，侵权必究】判断，如果没哟登录，那些内页的链接直接统本文作者：唐霜，转载请注明出处。原创内容，盗版必究。一换成登录页的链接，如果已经登录，则正常【作者：唐霜】【关注微信公众号：wwwtangshuangnet】显示。但这个地方要注意，比如首页，可能也【本文受版权保护】原创内容，盗版必究。有这样的链接，如果你登录了，首页DOM中【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】的链接是不会变的，所以你需要在登录操作之原创内容，盗版必究。原创内容，盗版必究。后刷新URL，或者通过Ajax的succ【版权所有，侵权必究】【原创内容，转载请注明出处】ess回调函数中，修改这些链接。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

第三种，使用$.mobile.chang【版权所有，侵权必究】【原创内容，转载请注明出处】ePage实现间接跳转。jqm之所以不能【作者：唐霜】未经授权，禁止复制转载。实现跳转，是因为它的Ajax加载页面无法【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。绕过header，所以如果你最好不要有跳【原创内容，转载请注明出处】【本文首发于唐霜的博客】转，比如你需要跳转的地方，干脆直接引入跳【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转到的页面，把页面显示出来。但是这样明显【原创不易，请尊重版权】【原创不易，请尊重版权】是不大好的，所以实在没有办法的时候，使用转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。这里提出来的间接跳转。比如你打算某一个地未经授权，禁止复制转载。【作者：唐霜】方使用header location了，【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】这个时候打住，把这个跳转代码换成下面的代转载请注明出处：www.tangshuang.net【转载请注明来源】码：

【未经授权禁止转载】【本文首发于唐霜的博客】【本文受版权保护】原创内容，盗版必究。【作者：唐霜】

<html>
  <head>
    <title>跳转页面...</title>
    <meta charset="utf-8">
  </head>
  <body>
    <script>
      $.mobile.changePage('{$url}');
    </script>
  </body>
</html>

$url就是要跳转到的目标地址。这个实现【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】的原理很简单，Ajax加载的代码就是上面著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】的<script>部分，激活本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】了changePage，于是开始跳转。不转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net过这个动作实际上在用户体验上并不好，因为未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】这个跳转会出现一个空白页，虽然不影响大局【本文受版权保护】【本文首发于唐霜的博客】，而且还非常流畅的实现了跳转，但是如果用本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net户追求细节，可能就需要你对这个界面进行进【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一步的美化，例如加入一些跳转提示图片等。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】

好了，今天就谈这三个问题，如果你有自己的【本文受版权保护】转载请注明出处：www.tangshuang.net疑问或想法，欢迎通过下方的评论框与我讨论本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】。

【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【作者：唐霜】转载请注明出处：www.tangshuang.net

2014-08-19 4577