为什么使用jquerymobile的网页,绑定的click事件会被触发两次
首先,我说解决办法,只需要把你所有的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="htt p:/ code.jquer y.c om/jquery-1.8.2.mi n.js"></script>
<script src="htt p:/ /code.jquer y.co m/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="htt p:/ /ww w .5 1rom s.co m/images/crazy.jpg" alt="Click me"></p>
</body>
</html>
然后,我说说思路,这个问题真的很奇葩,一般人还真不知道为什么会这样。但是我在调试的时候发现,你的js居然加载了两遍!
这就是为什么它会执行两次,因为pageinit被调用了两遍。但是为什么js会加载两次呢?你看看最后的页面结构