JQuery Mobile - 为什么绑定事件后会被多次执行？

最新推荐文章于 2024-10-05 16:15:28 发布

转载最新推荐文章于 2024-10-05 16:15:28 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunylat/p/9691615.html

本文详细解析了JQuery Mobile中事件绑定被多次执行的原因，并提供了使用on/off及bind/unbind方法解决事件重复绑定问题的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>