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. linux用户和组

    1.用户隶属于用户组的. 2.用户与用户组配置文件 1)用户组配置文件 /etc/group 第一列:用户组的组名 第二列:组密码(真正的密码存储在了gshadow中) 第三列:用户组组ID,用户组唯 ...

  2. linux两个线程

    http://blog.csdn.net/marksinoberg/article/details/50945212

  3. Cannot initialize Cluster. Please check your configuration for mapreduce.framework.name and the correspond server addresses.

    解决方法: <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop-m ...

  4. how to enable the Accessibility in the app

    第一部分 先要装一个accchecker,全称是 UI Accessibility Checker .下载地址: http://acccheck.codeplex.com/ 装了之后 用这个工具可以 ...

  5. word-break:break-all; 和 word-wrap:break-word 换行

    word-break:break-all; 和 word-wrap:break-word;两种写法都是让英文句子在父级宽度不够的情况下换行. 两个属性都同样是让文字换行,但存在着细微的区别,大部分时候 ...

  6. 20155235 2016-2017-2 《Java程序设计》第7周学习总结

    20155235 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 认识Lambda语法 Lambda语法概览 Lambda表达式与函数 ...

  7. python之基础补充

    一 bit,和bytes的关系 bit:就是计算机的最小的表示单位. bytes:就是计算机的最小的储存单位. 1  字节(bytes) = 8 位(bit) 格式: print(bytes('字符' ...

  8. python之零碎知识

    一 join方法 主要是做字符串的拼接:join后面跟的类型必须是要可迭代得到对象 for循环的对象是可迭代对象 # result = "".join(li) # print(re ...

  9. 第1章 (名词)Le nom

    ★名词的种类:(1)普通名词 —专有名词,如:          un livre —la Chine(2)可数名词—不可数名词,如:          un ami —le lait(3)具体名词— ...

  10. IntelliJ IDEA 2017版 编译器使用学习笔记(三) (图文详尽版);IDE快捷键使用

    一.列操作 功能:操作多行列执行相同的功能,达到一次修改多行同类型数据的情况,如图:                 Json字符串,转为枚举类的字段: 首先进行,快捷键一行快速操作 1.选中命令,s ...