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

http://www.w3school.com.cn/jquery/event_preventdefault.asp

https://blog.csdn.net/tmacjackson/article/details/46830027

JQuery Mobile - 为什么绑定事件后会被多次执行？的更多相关文章

  1. Jquery on方法绑定事件后执行多次

    每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });

  2. 2017年3月25日工作日志：Jquery使用小结[绑定事件判断、select标签、军官证正则]

    jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...

  3. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  4. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  5. jQuery添加html绑定事件

    jQuery添加html绑定事件 $("#xxx").on("click",".dev",function(){ });

  6. jQuery的live绑定事件在mobile safari（iphone / ipad / ipod）上失效的解决方案

    jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

  7. jquery 使用off移除事件 使用one绑定一次事件，on绑定事件后触发多次相同的事件的异常

    <!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...

  8. jQuery Mobile方向感应事件

    在现在的智能手机中,都有对方向变换的自动感知功能,比如当手机方向从水平方向切换到垂直方向时,则会触发该事件.在jQuery Mobile中,可以通过orientationchange事件进行绑定,并且 ...

  9. jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

随机推荐

  1. 获取url路径中的参数

    简介 运用js的时候,我们有时可能会有这样的需求,就是想要获取浏览器地址栏指定的一项参数,形如:https://i.cnblogs.com/EditPosts.aspx?postid=8628413& ...

  2. Golang之Socket

    go创建socket很简单 package main import ( "fmt" "net" ) func main() { //服务器监听地址 fmt.Pr ...

  3. DNA甲基化检测服务

    DNA甲基化检测服务 DNA甲基化是最早发现的基因表观修饰方式之一,真核生物中的甲基化仅发生于胞嘧啶,即在DNA甲基化转移酶(DNMTs)的作用下使CpG二核苷酸5'-端的胞嘧啶转变为5'-甲基胞嘧啶 ...

  4. Luogu 3953[NOIP2017] 逛公园 堆优化dijkstra + 记忆化搜索

    题解 首先肯定是要求出单源最短路的,我用了堆优化dijikstra ,复杂度 mlogm,值得拥有!(只不过我在定义优先队列时把greater 打成了 less调了好久 然后我们就求出了$i$到源点的 ...

  5. 理解OAuth 2.0 (摘自阮一峰网络日志)

    OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为R ...

  6. 用个体软件过程(PSP)记录你的工作

    用个体软件过程(PSP)记录你的工作 首先,非常感谢大家对本门课程的学习所投入的时间和精力. 其次,已经进入数据时代,口说无凭,拿数据来.如果你认为你已经投入了大量精力在这门课程的学习和作业中,而且已 ...

  7. redis学习-有序集合（zset）常用命令

    zadd:有序集合增加一个或者多个键值对 与set集合不同,zset添加的时候需要 指定 score,这个是用来排名的 zrange:返回指定范围的键 zcount:返回集合指定范围的个数(以每个键值 ...

  8. Axios的基本使用

    Axios的基本使用 介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.在vue 中,用来发ajax请求,与后端交互. 从浏览器中创建 XMLHtt ...

  9. shell中$(( ))、$( )与${ }的区别

    转载自:http://blog.sina.com.cn/s/blog_4da051a60102uwda.html 命令替换 在bash中,$( )与` `(反引号)都是用来作命令替换的. 命令替换与变 ...

  10. Structure From Motion(二维运动图像中的三维重建)

    SfM(Structure from Motion)简介 Structure from motion (SfM) is a photogrammetric range imaging techniqu ...