Я тестировал событие jquery mobile 'tap' и обнаружил, что он запускал два раза, каждый раз, когда он запускается. Код, как показано ниже для страницы html:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<style>
#box{
background-color:red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box">
tapped me
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('tap',function(event) {
alert('why');
});
});
</script>
</body>
</html>
Больше иронии, когда я проверяю это на jsfiddle, он только запускал событие для один раз.
Здесь ссылка. http://jsfiddle.net/mochatony/tzQ6D/6/
После дальнейшего тестирования я узнал, что ошибка ушла с размещением javascript в разделе заголовка.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js">
</script>
<style type="text/css">
#box{ background-color:red; width:200px; height:200px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('tap', function(event) {
alert('halo');
});
});
</script>
</head>
<body>
<div id="box">
tapped me
</div>
</body>
</html>
Я не мог объяснить, почему размещение в разделе body и header делает это другим.
