极客观点
研发管理
HarmonyOS
问题描述
在开发一个手机网站的时候，
使用了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
求助
哪位仁兄有遇到过类似的问题，
且有解决的话，
帮忙告知解决方案，
感激不尽~
首先，我说解决办法，只需要把你所有的script内容放到head里即可
<!DocType html> <html> <head> <title>jquerymobile click triggered twice ?</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> </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> </body> </html>然后，我说说思路，这个问题真的很奇葩，一般人还真不知道为什么会这样。但是我在调试的时候发现，你的js居然加载了两遍!
这就是为什么它会执行两次，因为
pageinit被调用了两遍。但是为什么js会加载两次呢？你看看最后的页面结构跟你书写的完全不一样，多了个
<div data-role="page">。因此，答案揭晓了，如果你在页面中没有使用<div data-role="page">，jquery mobile会自己创建一个，因为它必须依赖这个。它怎么创建呢？把
body里面的内容复制一遍塞到div里去，body里有什么东西呢？除了你的img外还有两个script，因此它被塞入到新节点后，浏览器解释为需要加载scirpt里的内容，最后奇迹就发生了。。。