为什么使用jquerymobile的网页，绑定的click事件会被触发两次？

0 0

为什么使用jquerymobile的网页，绑定的click事件会被触发两次？

问题描述

在开发一个手机网站的时候，
使用了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

求助

哪位仁兄有遇到过类似的问题，
且有解决的话，
帮忙告知解决方案，
感激不尽~

jquery jquery-mobile

11 years, 12 months ago

cccp218

cccp218 11 years, 12 months ago

首先，我说解决办法，只需要把你所有的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居然加载了两遍!

屏幕快照-2012-11-07-上午12.44.29.png

这就是为什么它会执行两次，因为 pageinit 被调用了两遍。但是为什么js会加载两次呢？你看看最后的页面结构

屏幕快照-2012-11-07-上午12.46.11.png

跟你书写的完全不一样，多了个 <div data-role="page"> 。因此，答案揭晓了，如果你在页面中没有使用 <div data-role="page"> ，jquery mobile会自己创建一个，因为它必须依赖这个。

它怎么创建呢？把 body 里面的内容复制一遍塞到 div 里去， body 里有什么东西呢？除了你的 img 外还有两个 script ，因此它被塞入到新节点后，浏览器解释为需要加载 scirpt 里的内容，最后奇迹就发生了。。。

answered 11 years, 12 months ago

圣地大哥吴克

圣地大哥吴克 answered 11 years, 12 months ago