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文件路径就可以了！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 远程JS 可以正常使用 -->
<!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> --> <!-- 本地JS-->
<link rel="stylesheet" href="../js/common/jquery.mobile-1.4.5.min.css">
<script src="../js/common/jquery-2.1.4.js"></script>
<script src="../js/common/jquery.mobile-1.4.5.min.js"></script>
<!--<script src="../cordova.js"></script>--> </head>
<body> <div data-role="Page"> <div data-role="header" data-position="fixed">
<a href="index.html" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-back">返回</a>
<h1>设置密码</h1>
</div> <div data-role="content"> <form method="post" action="#">
<input type="text" name="password" id="password">
<!--<input type="submit" data-inline="true" value="提交">-->
<button id="changePassword" class="ui-btn ui-btn-corner-all ui-corner-all">
设置密码
</button>
</form>
</div>
</div> <script language="JavaScript"> $(document).bind("pageinit", function () { //对"tap"事件的绑定 // off和on绑定"tap"方法
$("#changePassword").off("tap").on("tap", function (e) { //加入此方法，阻止元素发生默认的行为
e.preventDefault(); alert('clicked on "tap" use "on"'); }); // // bind和unbind绑定"tap"方法
// $("#changePassword").unbind("tap").bind("tap", function (e) {
//
// alert('clicked on "tap" use "bind"');
//
// //加入此方法，阻止元素发生默认的行为
// e.preventDefault();
// }); //--------------------------------------------------------------------------
//对"click"事件的绑定 // // off和on绑定"click"方法
// $("#changePassword").off("click").on("click", function (e) {
//
// //加入此方法，阻止元素发生默认的行为
// e.preventDefault();
//
// alert('clicked on "click" use "on"');
//
//
// }); // // bind和unbind绑定"click"方法
// $("#changePassword").unbind("click").bind("click", function (e) {
//
// alert('clicked on "tap" use "bind"');
//
// //加入此方法，阻止元素发生默认的行为
// e.preventDefault();
// }); //--------------------------------------------------------------------------
//cordova代码 <!--添加cordova设备就绪事件-->
<!--document.addEventListener("deviceready", function () {--> <!--显示设备信息-->
<!--showDeviceInfo();-->
<!--}, false);--> <!--显示设备信息-->
<!--function showDeviceInfo() {-->
<!--alert(device.cordova);-->
<!--}--> }) </script> </body>
</html>
注意问题：如果自写的JS代码不在body里面，在真机执行没有效果，不执行！把自己写的JS代码加入到body里面就可以了，最好是写一个单独的JS文件，包含进来，那样页面看起来更规整！
参考：
https://blog.csdn.net/gundumw100/article/details/69993029
https://blog.csdn.net/aptentity/article/details/71268011