ไปค้นดูครับ คนเจอปัญหาเยอะแยะ เช่น
http://stackoverflow.com/questions/14411532/all-jquery-mobile-events-firing-twice
http://stackoverflow.com/questions/10794181/jquery-mobile-tap-event-triggered-for-twice
และมีหลายวิธีแก้เหลือเกิน เช่น
1. เปลี่ยน event สำหรับการแตะ จาก tap เป็น click คือให้ใช้
$("#btt").off().on("click",function(){ //do something })
2. ใช้ off ปิด event ก่อนหน้า แล้วตามด้วย on เช่น
$("#btt").off().on("tap",function(){ //off then on });
หรือ
$("#btt").off("tap").on("tap",function(){ //off then on });
3. ย้าย script ไปไว้ระหว่างแท็ก head ไม่ใช่ส่วน body
4. เพิ่ม event.preventDefault(); เช่น
$("#btt").on("tap",function(event){ event.preventDefault(); //other codes });
5. วางลำดับการอ้างถึง JavaScript และแทรก script ต่อไปนี้ลงไป
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" /> <script src="js/jquery-2.1.1.min.js"></script> <script> $(document).on("mobileinit", function() { $.mobile.ajaxEnabled = false; $.mobile.pushStateEnabled = false; $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; $.mobile.defaultTransition = 'none'; }); </script> <script src="js/jquery.mobile-1.4.4.min.js"></script> <script src="js/index.js"></script> <script src="cordova.js"></script> <script src="cordova_plugins.js"></script>
และอีกมากมาย
ส่วนตัวผมเองเจอปัญหากับ tap แล้วแค่พอเปลี่ยนเป็น click ก็หาย
สาเหตุอีกอย่างนึง ที่สังเกตดูคือ ถ้าเราสร้างแอพโดยมีหลายๆ หน้า และแต่ละหน้าเชื่อมโยงกันไปมา คือสามารถกระโดดไป-กลับ ไปหน้าอื่นๆได้
การกำหนด event สำหรับปุ่มต่างๆ ควรจะเอาไว้ใน
$(document).on("pagecreate","#pageID",function(){ //begin code here });
ส่วนตัวแปรที่ต้องการอัพเดททุกครั้ง เช่น เพื่อการแสดงผล ให้เอาไว้ใน
$(document).on("pagebeforeshow","#pageID",function(){ //begin code here });
ไม่ควรเอา event สำหรับปุ่มไว้ใน page event: pagebeforeshow เพราะทุกครั้งที่กลับมาที่หน้านี้ ผมเข้าใจว่าปุ่มมันเหมือนจะถูกกำหนด event สองครั้งซ้อน เมื่อเรากดปุ่มก็เลยเหมือนกดสองครั้ง
ถ้าใครเจอปัญหานี้ ลองวิธีแก้ต่างๆข้างต้นดูครับ
