JQuery Mobile - 為什麽綁定事件後會被多次執行？
阿新 • • 發佈：2018-09-23
ext csdn 一個 修改 min 兩種 密碼 mon info
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"> 67 <!-- 遠程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 - 為什麽綁定事件後會被多次執行？