Jquery中的bind()方法的一点问题
bind()方法绑定事件的时候,第二个参数是函数,如果代码都写在函数里面,没有任何问题。但是,直接调用外部封装的函数需要注意,出错的例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div>点我</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("div").bind("click",popWindow());
//弹窗测试函数
function popWindow(){
alert("弹窗方法执行了...")
} </script>
</body>
</html>
上面这个例子打开网页立即弹窗,说明外部的函数立马执行了。当我们点击div的时候,没反应了。。。
在匿名函数里面调用外面封装的函数就没有问题了,正确的例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div>点我</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("div").bind("click",function(){popWindow()});
//弹窗测试函数
function popWindow(){
alert("弹窗方法执行了...")
} </script>
</body>
</html>
这样就正常了。
我们在实际操作中,很可能绑定好多个函数,这个函数有的要求执行1次便需要解绑,有的需要一直绑定。这种情况下,错误的例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div>点我</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("div").bind("click",function(){popWindow1()});
$("div").bind("click",function(){popWindow2();$(this).unbind("click");});
//弹窗测试函数1
function popWindow1(){
alert("弹窗方法1执行了...")
}
//弹窗测试函数2
function popWindow2(){
alert("弹窗方法2执行了...")
} </script>
</body>
</html>
这样操作,点击1次后,其实是把click事件解除了。之后,当然popWindow1()和popWindow2()都不会执行了。如果我们需要popWindow2()点击一次后消失,而popWindow1()点击时一直存在。这种写法就不妥了。对于这种需求,正确的例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div>点我</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("div").bind("click",function(){popWindow1()});
$("div").bind("click",function(event){popWindow2();$(this).unbind(event);});
//弹窗测试函数1
function popWindow1(){
alert("弹窗方法1执行了...")
}
//弹窗测试函数2
function popWindow2(){
alert("弹窗方法2执行了...")
} </script>
</body>
</html>
这样,点击一次后,popWindow2()消失,而popWindow1()点击时一直存在。$(this).unbind(event) 把本次绑定的事件取消了,而不会取消之前绑定过的事件,灵活性增加了。比如前面有个条件,如果达到这个条件后,取消绑定的这个函数,就用这个方法。
当然,上面的这个例子比较简单,第二个函数可以用jquery中的one()方法绑定,点击一次后解绑实现同样的功能。
注意:unbind()去不掉行间事件
Jquery还有许多这样的例子,都是一样的解决办法。
Jquery中的bind()方法的一点问题的更多相关文章
- jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...
- jquery 中一些 特殊方法 的特殊使用 一览表
cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- jQuery中的join方法
和JS 中的JOIN 方法一样,将一数组按照JOIN的参数连接起来.比如: var arr = [ "a", "b", "c", " ...
- HTML5中的data-*属性和jQuery中的.data()方法使用
原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...
- jQuery 中的 unbind() 方法
jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: unbind([type][, data]); type是事件类型,dat ...
- 解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy”错的方法
解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the ...
- jquery中的index方法
问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2) //调用者P1可以为对象或集合 参数为空,返回P1 ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
随机推荐
- CSS max-width: 0;
写CSS,大家都知道max-width是要在宽度超过后才会生效,但今天我发现一个神奇的现象, 为表格td加上max-width: 0;可以让上下两个表格自动对齐,这句的作用到底是什么还有待研究,今天先 ...
- D2007从win7升级到win10下的莫名其妙问题。
在win7下听说win10被推荐,于是升级到win10.结果使用d2007不能打开,出现莫名其妙的错误.把bin\bds.exe改名bds1.exe后居然可以启动了.一番折腾后,这把bds1.exe改 ...
- lucene_07_solr使用IK分词器
使用IKAnalyzer 中文分析器.. 第一步: 把,IKAnalyzer2012FF_u1j 添加到sol/WEB-INF/lib 目录下. 第二步: 复制IKAnalyzer 的配置文件和自定义 ...
- 洛谷——P1507 NASA的食物计划
https://www.luogu.org/problem/show?pid=1507#sub 题目背景 NASA(美国航空航天局)因为航天飞机的隔热瓦等其他安 全技术问题一直大伤脑筋,因此在各方压力 ...
- POJ 1678
博弈题,使用DP来完成.开始时,我以为可以用极大极小加剪枝可以过,但,TLE... 看过一些题解,没看懂,但也由此有了启发: 我们只记录差(初始为0),那为1选的数即为在原差值上加上该数,2选即是减去 ...
- JS经常使用表单验证总结
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- android 构建GPS Provide步骤及信息
构建GPS Provide步骤及信息 1. 用GPS2GoogleEarth录制KML文件 2. KML文件 2.1 经纬度解析 <LineString> <coordina ...
- 手游server之数据IO进化
这里数据IO是指游戏数据存盘和读取. 假设IO处理不好.server在IO时会导致.游戏卡顿较长的时间,严重影响游戏体验. 近期服务端刚好对IO这一块做了优化,把优化过程记录一下. 一 原始版 刚開始 ...
- luogu3369 【模板】 普通平衡树 Splay
题目大意 维护一个数据结构,满足以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(排名定义为比当前数小的数的个数+1.若有多个相同的数,因输出最小的排名) 查询排名为x ...
- java.lang.RuntimeException: Unable to get provider
java.lang.RuntimeException: Unable to get provider dev.dworks.apps.candidcamera.provider.MediaDocum ...