JQuery Mobile - 为什么绑定事件后会被多次执行?

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

上一篇:ASP.NET Identity - LockoutEnabled


下一篇:Jquery中on绑定事件 点击一次 执行多次 的解决办法