在开发一个手机网站的时候，使用了jquerymobile的js，以便手机网站支持触摸屏左右拖动的事件处理，结果上述功能做好了，却发现原有的click点击事件统统都会被执行两次。代码很简单，示例如下：<!DocType html><html><head><title>jquerymobile click triggered twice ?</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> </head><body><h1>奇怪了？！！</h1><p>Some content here.</p><p><img id="test" src="http://www.51roms.com/images/crazy.jpg" alt="Click me"></p><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script>var i = 0;
$(document).bind('pageinit', function() {
$('#test').bind('click', function(e) { alert('clicked: ' + i);
i ++;
});
});</script></body></html>补充遇到问题的环境系统：windows XP 和 android 2.3浏览器：Firefox 最新版，android 2.3自带的chrome用html5，引入jquery 1.8和jquerymobile 1.2.0
2 回答
紫衣仙女
TA贡献1839条经验 获得超15个赞
我在本地用你的代码测试了下，也有同样的问题。
然后把jQuery Mobile移除绑定到ready上，就没有这个问题了。
所以应该是jQueryMobile的问题，或者是你使用的方式有问题。
PS：没有用过jQuery Mobile
----
看了下jQuery Mobile的文档，最外层加了个div，设置 data-role="page"就没有问题了
绝地无双
TA贡献1946条经验 获得超4个赞
我最后总结了一套方法
1. body最外层加<div data-role="page"></div>
2. 所有的js放在<div data-role="page"></div>
保证OK
- 2 回答
- 0 关注
- 317 浏览
添加回答
举报
0/150
提交
取消