JQuery Mobile - 为什么绑定事件后会被多次执行？
Posted sunylat
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery Mobile - 为什么绑定事件后会被多次执行？相关的知识，希望对你有一定的参考价值。
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 <!--<script language="javascript">--> 19 <!--//添加cordova设备就绪事件--> 20 <!--document.addEventListener("deviceready", function () {--> 21 22 <!--//显示设备信息--> 23 <!--//showDeviceInfo();--> 24 <!--}, false);--> 25 26 <!--//显示设备信息--> 27 <!--function showDeviceInfo() {--> 28 <!--alert(device.cordova);--> 29 <!--}--> 30 31 <!--</script>--> 32 33 <script language="JavaScript"> 34 35 $(document).bind("pageinit", function () { 36 37 //对"tap"事件的绑定 38 39 // off和on绑定"tap"方法 40 $("#changePassword").off("tap").on("tap", function (e) { 41 42 alert(‘clicked on "tap" use "on"‘); 43 44 //加入此方法，阻止元素发生默认的行为 45 e.preventDefault(); 46 }); 47 48 49 // // bind和unbind绑定"tap"方法 50 // $("#changePassword").unbind("tap").bind("tap", function (e) { 51 // 52 // alert(‘clicked on "tap" use "bind"‘); 53 // 54 // //加入此方法，阻止元素发生默认的行为 55 // e.preventDefault(); 56 // }); 57 58 //-------------------------------------------------------------------------- 59 //对"click"事件的绑定 60 61 // // off和on绑定"click"方法 62 // $("#changePassword").off("click").on("click", function (e) { 63 // 64 // alert(‘clicked on "click" use "on"‘); 65 // 66 // //加入此方法，阻止元素发生默认的行为 67 // e.preventDefault(); 68 // }); 69 70 // // bind和unbind绑定"click"方法 71 // $("#changePassword").unbind("click").bind("click", function (e) { 72 // 73 // alert(‘clicked on "tap" use "bind"‘); 74 // 75 // //加入此方法，阻止元素发生默认的行为 76 // e.preventDefault(); 77 // }); 78 79 80 }) 81 82 </script> 83 84 </head> 85 <body> 86 87 <div data-role="Page"> 88 <div data-role="header" data-position="fixed"> 89 <a href="index.html" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-back">返回</a> 90 <h1>设置密码</h1> 91 </div> 92 93 <div data-role="content"> 94 95 <form method="post" action="#"> 96 <input type="text" name="password" id="password"> 97 <!--<input type="submit" data-inline="true" value="提交">--> 98 <button id="changePassword" class="ui-btn ui-btn-corner-all ui-corner-all"> 99 设置密码 100 </button> 101 </form> 102 </div> 103 104 </body> 105 </html>
参考：
https://blog.csdn.net/gundumw100/article/details/69993029
https://blog.csdn.net/aptentity/article/details/71268011
http://www.w3school.com.cn/jquery/event_preventdefault.asp
以上是关于JQuery Mobile - 为什么绑定事件后会被多次执行？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery的on绑定事件在mobile safari（iphone / ipad / ipod）上无法使用的解决方案
jQuery Mobile 1.3.1 taphold 事件多次触发