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. MVC FormCollection 无法获取值的问题

     把action定义为[HttpPost],并且ajax.beginform中ajaxoption中定义为Post,在提交表单时就可以获取FormCollection的值了.httpGet或者后台不定 ...

  2. 开发中常遇到的Python陷阱和注意点-乾颐堂

    最近使用Python的过程中遇到了一些坑,例如用datetime.datetime.now()这个可变对象作为函数的默认参数,模块循环依赖等等. 在此记录一下,方便以后查询和补充. 避免可变对象作为默 ...

  3. javascript札记

    bind和unbind对应,live和die对应,千万别用bind绑定,用die解除.还有bind可以多次绑定同一个函数,可能会被执行多次同一个函数 正则表达式的使用 var email_reg = ...

  4. Spring Boot 简单的请求示例（包括请求体验证）

    1.先做个最简单的Get请求 新建一个Controller , 并给他添加注解@RestController 它是@Controller和@ResponseBody的组合注解,告诉Spring我是一个 ...

  5. 2018.07.09 顺序对齐（线性dp）

    顺序对齐 题目描述 考虑两个字符串右对齐的最佳解法.例如,有一个右对齐方案中字符串是 AADDEFGGHC 和 ADCDEGH. AAD~DEFGGHC ADCDE~~GH~ 每一个数值匹配的位置值 ...

  6. AE IRasterCursor 获取栅格图层像素值

    在编写使用栅格图层的代码时,常常要获取栅格图层的像素值(PixelValue).如果想获取某一点的像素值,可以使用IRaster2中的getPixelValue方法.但如果想要获得的是图层中的某一块甚 ...

  7. AE（ArcEngine）定制工具Tool工具箱

    using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServi ...

  8. python编码（一）

    下面介绍一下python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1等编码之间的转换. 1.自动识别字符串编码: #coding:utf8 ...

  9. 9) 依赖查询 & 镜像站

    依赖查询 http://mvnrepository.com/ Maven仓库查询 http://search.maven.org 仓库 加上这两个,如果使用中央仓库 Eclipse 极有可能会卡死 & ...

  10. （最小生成树）Jungle Roads -- HDU --1301

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1301 http://acm.hust.edu.cn/vjudge/contest/view.action ...