Jquery Mobile 中绑定事件

今天遇到了jmobile中绑定事件的问题,

参考:http://liyunpeng.iteye.com/blog/1964165

对页面中的绑定事件有了大概了解,不过这篇帖子年代久远,很多不是很详细,特此记录.

首先查到jmobile中的所有可以用.on()动态绑定的所有事件,

详情参考:http://www.runoob.com/jquerymobile/jquerymobile-ref-events.html

按以前的理解照抄,结果死活出不来效果,认真查看示例发现需要加"pageinit"事件

$(document).on("pageinit","#pageone",function(){
  $("p").on("tap",function(){
    $(this).hide();
  });                       
});

大概解释一下这几句代码,on的使用方式和jqeury一样,中间的参数是子集选择器,和jquery不一样的是,单击事件名字成了tap(敲击),还有个vclick(虚拟化的 click 事件处理器),亲测这2个事件效果是一样,还有如下

scrollstart	当用户开始滚动页面时触发。
scrollstop	当用户停止滚动页面时触发。
swipe	当用户在元素上水平滑动时触发。
swipeleft	当用户从左划过元素超过 30px 时触发。
swiperight	当用户从右划过元素超过 30px 时触发。
tap	当用户敲击某元素时触发。
taphold	当元素敲击某元素并保持一秒时触发。
throttledresize	启用可标记 #hash 历史记录
updatelayout	由动态显示/隐藏内容的 jQuery Mobile 组件触发。
vclick	虚拟化的 click 事件处理器
vmousecancel	虚拟化的 mousecancel 事件处理器
vmousedown	虚拟化的 mousedown 事件处理器
vmousemove	虚拟化的 mousemove 事件处理器
vmouseout	虚拟化的 mouseout 事件处理器
vmouseover	虚拟化的 mouseover 事件处理器
vmouseup	虚拟化的 mouseup 事件处理器

现在好了,可以完成自己的想法了;可是问题又来了,在有些时候会发现单击事件会触发2次....继续度娘,发现相同的情况好多,主要原因是页面初始化事件么有解绑定,与on对应的是off事件

参考:http://bbs.csdn.net/topics/390499499   完美解决

$(document).on("pageinit","#pageone",function(){
  $("p").on("tap",function(){
    $(this).hide();
  });                       
}).on("pageinit", "#page2", initPage2);

 

function initPage2(event) {

       $(document).off('pageinit', '#page2', initPage2);

        //在第二个页面需要绑定的事件代码

       alert("page2 init" + event.target.baseURI);

};

PS:在查阅相关文档时发现个jmobile独有的选择器:jqmData,可以这样用

alert( $(":jqmData(role='content')").length)

最后一句,充分说明:我们不生产代码,只是谷歌(被墙以后现在是度娘)的搬运工~~