JQuery Mobile 在绑定事件时候，发现会被多次执行，为什么啊？
原来，jquery click 不是替换原有的function ，而是接着添加，所以才会执行次数越来越多，怎么办才能按需实现功能？在执行正常点击事件之前，解绑事件！！
JQuery对事件的绑定主要有两种方式，分别是on和bind，这两种方式分别对应的解绑方式为off和unbind，知道这些，我们就可以写代码了：
一，用on和off
// off和on绑定"tap"方法 $("#changePassword").off("tap").on("tap", function (e) { alert('clicked on "tap" use "on"'); //加入此方法，阻止元素发生默认的行为 e.preventDefault(); });
二，用bind和unbind
// bind和unbind绑定"tap"方法 $("#changePassword").unbind("tap").bind("tap", function (e) { alert('clicked on "tap" use "bind"'); //加入此方法，阻止元素发生默认的行为 e.preventDefault(); });
说明：JQuery可以把多个操作形成一个链，一起执行，上面语句的unbind和bind，就是被写成链式调用了！
下面是我解决这个问题时候的页面全部源码，如果你想直接运行，修改一下相应css和JS文件路径就可以了！
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <!-- 远程JS 可以正常使用 --> 8 <!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> 9 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 10 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> --> 11 12 <!-- 本地JS--> 13 <link rel="stylesheet" href="../js/common/jquery.mobile-1.4.5.min.css"> 14 <script src="../js/common/jquery-2.1.4.js"></script> 15 <script src="../js/common/jquery.mobile-1.4.5.min.js"></script> 16 <!--<script src="../cordova.js"></script>--> 17 18 </head> 19 <body> 20 21 <div data-role="Page"> 22 23 <div data-role="header" data-position="fixed"> 24 <a href="index.html" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-back">返回</a> 25 <h1>设置密码</h1> 26 </div> 27 28 <div data-role="content"> 29 30 <form method="post" action="#"> 31 <input type="text" name="password" id="password"> 32 <!--<input type="submit" data-inline="true" value="提交">--> 33 <button id="changePassword" class="ui-btn ui-btn-corner-all ui-corner-all"> 34 设置密码 35 </button> 36 </form> 37 </div> 38 </div> 39 40 <script language="JavaScript"> 41 42 $(document).bind("pageinit", function () { 43 44 //对"tap"事件的绑定 45 46 // off和on绑定"tap"方法 47 $("#changePassword").off("tap").on("tap", function (e) { 48 49 //加入此方法，阻止元素发生默认的行为 50 e.preventDefault(); 51 52 alert('clicked on "tap" use "on"'); 53 54 }); 55 56 57 // // bind和unbind绑定"tap"方法 58 // $("#changePassword").unbind("tap").bind("tap", function (e) { 59 // 60 // alert('clicked on "tap" use "bind"'); 61 // 62 // //加入此方法，阻止元素发生默认的行为 63 // e.preventDefault(); 64 // }); 65 66 //-------------------------------------------------------------------------- 67 //对"click"事件的绑定 68 69 // // off和on绑定"click"方法 70 // $("#changePassword").off("click").on("click", function (e) { 71 // 72 // //加入此方法，阻止元素发生默认的行为 73 // e.preventDefault(); 74 // 75 // alert('clicked on "click" use "on"'); 76 // 77 // 78 // }); 79 80 // // bind和unbind绑定"click"方法 81 // $("#changePassword").unbind("click").bind("click", function (e) { 82 // 83 // alert('clicked on "tap" use "bind"'); 84 // 85 // //加入此方法，阻止元素发生默认的行为 86 // e.preventDefault(); 87 // }); 88 89 90 //-------------------------------------------------------------------------- 91 //cordova代码 92 93 <!--添加cordova设备就绪事件--> 94 <!--document.addEventListener("deviceready", function () {--> 95 96 <!--显示设备信息--> 97 <!--showDeviceInfo();--> 98 <!--}, false);--> 99 100 <!--显示设备信息--> 101 <!--function showDeviceInfo() {--> 102 <!--alert(device.cordova);--> 103 <!--}--> 104 105 }) 106 107 </script> 108 109 </body> 110 </html>
注意问题：如果自写的JS代码不在body里面，在真机执行没有效果，不执行！把自己写的JS代码加入到body里面就可以了，最好是写一个单独的JS文件，包含进来，那样页面看起来更规整！
参考：
https://blog.csdn.net/gundumw100/article/details/69993029
https://blog.csdn.net/aptentity/article/details/71268011