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. Silverlight实用窍门系列：57.Silverlight中的Binding使用（二）-数据验证

    本文将简单讲述Silverlight中的Binding数据时的数据验证. NotifyOnValidationError:是否在出现异常/错误信息的时候激发BindingValidationError ...

  2. Kendo UI 的弹框

    弹出代码: "use strict"; (function (kendo) { kendo.messageShow = function (message, option) { v ...

  3. DB2频繁出现死锁，常用解决问题的命令

    --DB2频繁出现死锁,常用解决问题的命令db2 get snapshot for locks on sampledb2 get db cfg for sampledb2 update db cfg ...

  4. 挪过来的spring mvc 的入门 介绍

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  5. Speeding up Homestead on Windows Using NFS

    Speeding up Homestead on Windows Using NFS Sep 07 2015 Homestead Laravel EDIT: I have another articl ...

  6. vue run dev 8080端口被占用

    用vue 官方脚手架vue-cli构建项目容易碰到一些小错误 vue init webpack project-name ...... cd project-name npm install npm ...

  7. Ubuntu 配置网卡信息

    关于图形界面的配置,我这里就不多介绍了,这个很简单.这里介绍的是如何通过修改配置文件来实现虚拟网卡. 首先介绍ubuntu(我这里使用的是ubuntu-16.04)下虚拟网卡的配置 1.先用ifcon ...

  8. 设计模式之flyweight享元模式

    运用共享技术支持大量细粒度对象的使用 Flyweight模式(享元) Java深入到一定程度,就不可避免的碰到设计模式这一概念,了解设计模式,将使自己对java中的接口或抽象类应用有更深的理解.设计模 ...

  9. 2018.09.05 bzoj1010: [HNOI2008]玩具装箱toy（斜率优化dp)

    传送门 一道经典的斜率优化dp. 推式子ing... 令f[i]表示装前i个玩具的最优代价. 然后用老套路. 我们只考虑把第j+1" role="presentation" ...

  10. simpson法计算arctan(1)-即pi/4

    对1/(1+x^2) 进行0到1的积分即使pi/4; 采用simpson方法 Func<double,double> func=(x)=>{ return 1/(1+ Math.Po ...