Jquery Mobile 中绑定事件
2015-07-23 16:32
741 查看
今天遇到了jmobile中绑定事件的问题,
参考:/article/3887080.html
对页面中的绑定事件有了大概了解,不过这篇帖子年代久远,很多不是很详细,特此记录.
首先查到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个事件效果是一样,还有如下
现在好了,可以完成自己的想法了;可是问题又来了,在有些时候会发现单击事件会触发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)
最后一句,充分说明:我们不生产代码,只是谷歌(被墙以后现在是度娘)的搬运工~~
参考:/article/3887080.html
对页面中的绑定事件有了大概了解,不过这篇帖子年代久远,很多不是很详细,特此记录.
首先查到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 事件处理器 |
参考: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)
最后一句,充分说明:我们不生产代码,只是谷歌(被墙以后现在是度娘)的搬运工~~
相关文章推荐
- jQuery判断获得的对象是否存在的方法
- jquery easyui树形菜单调用点击事件例子
- js jquery 杂记
- jquery 插件写法笔记
- jquery实现简单的轮换出现效果实例
- jquery实现简单实用的打分程序实例
- 实习小结四:如何使用jQuery实现鼠标移动改变Tab
- 点击页面其它地方隐藏层
- jQuery获取对象
- jQuery 中的事件冒泡和阻止默认行为
- jQuery EasyUI 教程
- JQuery学习笔记
- jquery判断页面、图片是否加载完成
- 完美的jquery事件绑定方法on()
- jQuery easyUI 树形菜单
- 欢迎使用CSDN-markdown编辑器
- jQuery UI
- jquery Loading图片延迟加载特效
- jQuery
- jquery tablesorter插件的使用