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. Scrum使用心得 【转】

    原文链接: http://blog.sina.com.cn/s/blog_58db96bc0100ymuk.html 1      Scrum管理模式和传统管理模式的区别 这些管理模式本质上目的相同: ...

  2. Halcon一维码和二维码的解码步骤和技巧——第11讲

    针对Halcon中一维码和二维码的解码,我分别写了两篇文章,参见: <Halcon的一维条码解码步骤和解码技巧>:https://www.cnblogs.com/xh6300/p/1048 ...

  3. 都是假的！这位小姐姐 P 的图，认真看你就输了！

    开门见山,先来看张图: 肯定有不少小伙伴用不屑的语气说,嗬!一看就是 P 的! 是的,任谁都能一眼看出来是假的.但你可能想象不到,这张图的原始素材是有多么……支离破碎,熊是动物园里的,小孩是在家门口站 ...

  4. Netty 系列（三）Netty 入门

    Netty 系列(三)Netty 入门 Netty 是一个提供异步事件驱动的网络应用框架,用以快速开发高性能.高可靠性的网络服务器和客户端程序.更多请参考:Netty Github 和 Netty中文 ...

  5. 在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...

  6. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  7. 如何从dvi生成pdf--------亲测有效果.

    用里面第二个命令. http://blog.csdn.net/u014682350/article/details/46482477

  8. exit--进程退出；wait--进程等待；execl--执行程序

    函数原型:void exit(int status) 参数说明:退出状态. 函数原型:pid_t wait(int *status) 头文件:#include<sys/types.h>,# ...

  9. 2018.06.29 洛谷P1505 [国家集训队]旅游（树链剖分）

    旅游 题目描述 Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,T 城的任意两个景点之间有且只有 ...

  10. 马婕 2014年MBA，mpacc备考 报刊宣读1 中国的电子商务（转）

    http://blog.sina.com.cn/s/blog_3e66af4601015fxi.html 中国电子商务蓄势待发 Chinese e-commerce中国电子商务Pity the par ...