bind()方法绑定事件的时候，第二个参数是函数，如果代码都写在函数里面，没有任何问题。但是，直接调用外部封装的函数需要注意，出错的例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. 	<div>点我</div>
  9.    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  10.    <script>
  11. 	$("div").bind("click",popWindow());
  12. 	//弹窗测试函数
  13. 	function popWindow(){
  14. 		alert("弹窗方法执行了...")
  15. 	}
  16.  
  17. </script>
  18. </body>
  19. </html>

　　

上面这个例子打开网页立即弹窗，说明外部的函数立马执行了。当我们点击div的时候，没反应了。。。

在匿名函数里面调用外面封装的函数就没有问题了，正确的例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. 	<div>点我</div>
  9.    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  10.    <script>
  11. 	$("div").bind("click",function(){popWindow()});
  12. 	//弹窗测试函数
  13. 	function popWindow(){
  14. 		alert("弹窗方法执行了...")
  15. 	}
  16.  
  17. </script>
  18. </body>
  19. </html>

这样就正常了。

我们在实际操作中，很可能绑定好多个函数，这个函数有的要求执行1次便需要解绑，有的需要一直绑定。这种情况下，错误的例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. <div>点我</div>
  9.    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  10.    <script>
  11.    	$("div").bind("click",function(){popWindow1()});
  12. 	$("div").bind("click",function(){popWindow2();$(this).unbind("click");});
  13. 	//弹窗测试函数1
  14. 	function popWindow1(){
  15. 		alert("弹窗方法1执行了...")
  16. 	}
  17. 	//弹窗测试函数2
  18. 	function popWindow2(){
  19. 		alert("弹窗方法2执行了...")
  20. 	}
  21.  
  22. </script>
  23. </body>
  24. </html>

这样操作，点击1次后，其实是把click事件解除了。之后，当然popWindow1()和popWindow2()都不会执行了。如果我们需要popWindow2()点击一次后消失，而popWindow1()点击时一直存在。这种写法就不妥了。对于这种需求，正确的例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. 	<div>点我</div>
  9.    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  10.    <script>
  11.    	$("div").bind("click",function(){popWindow1()});
  12. 	$("div").bind("click",function(event){popWindow2();$(this).unbind(event);});
  13. 	//弹窗测试函数1
  14. 	function popWindow1(){
  15. 		alert("弹窗方法1执行了...")
  16. 	}
  17. 	//弹窗测试函数2
  18. 	function popWindow2(){
  19. 		alert("弹窗方法2执行了...")
  20. 	}
  21.  
  22. </script>
  23. </body>
  24. </html>

这样，点击一次后，popWindow2()消失，而popWindow1()点击时一直存在。$(this).unbind(event) 把本次绑定的事件取消了，而不会取消之前绑定过的事件，灵活性增加了。比如前面有个条件，如果达到这个条件后，取消绑定的这个函数，就用这个方法。

当然，上面的这个例子比较简单，第二个函数可以用jquery中的one()方法绑定，点击一次后解绑实现同样的功能。

注意：unbind()去不掉行间事件

Jquery还有许多这样的例子，都是一样的解决办法。

Jquery中的bind()方法的一点问题的更多相关文章

  1. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  2. jquery 中一些 特殊方法 的特殊使用 一览表

    cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...

  3. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  4. jQuery中的join方法

    和JS 中的JOIN 方法一样,将一数组按照JOIN的参数连接起来.比如: var arr = [ "a", "b", "c", " ...

  5. HTML5中的data-*属性和jQuery中的.data()方法使用

    原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...

  6. jQuery 中的 unbind() 方法

    jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: unbind([type][, data]); type是事件类型,dat ...

  7. 解决关于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 ...

  8. jquery中的index方法

    问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2)  //调用者P1可以为对象或集合 参数为空,返回P1 ...

  9. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

随机推荐

  1. C#学习笔记_01_基础内容

    01_基础内容 进(位)制 十进制:逢10进1,数字由0-9组成: 二进制:逢2进1,数字由0-1组成: 八进制:逢8进1,数字由0-7组成: 十六进制:逢16进1,数字由0-9和a-f组成: 进制转 ...

  2. 多层下firebird自增长字段的处理

    使用unidac可以解决自增长字段处理的问题. 对于多层就是一个比较烦人的事情,解决办法:cliendataset中自增长字段的处理:id:自增长字段.在client中的处理方法:clientdata ...

  3. 部署项目到tomcat时 访问项目404的问题总结

    使用tomcat服务器运行项目之前  需要把项目发布到(部署)tomcat上,然后启动服务器  运行项目 今天把以往正常运行的项目发布之后,运行时   竟然出现404  关键还不是我路径写错了   而 ...

  4. WordPress TinyMCE 编辑器增强技巧大全

    说到WordPress自带的TinyMCE 编辑器,有些国人总是不太满意.针对这个情况,倡萌已经介绍了一些增强或替代的方法: WordPress编辑器增强插件:TinyMCE Advanced Wor ...

  5. Python去除多余空格

    今天做爬虫时.发现结果中好多多余的空格.然后有强迫症的我当然不会放过 " xyz ".strip() # returns "xyz" " xyz &q ...

  6. APP_ABI

    在Application.mk文件中有个预定义命令参数APP_ABI,是指明编译与调试的CPU架构. 目前Android系统支持以下七种不同的CPU架构:ARMv5,ARMv7(从2010年起),x8 ...

  7. udev详解【转】

    本文转载自:http://blog.csdn.net/skyflying2012/article/details/9359185 如果你使用Linux比较长时间了,那你就知道,在对待设备文件这块,Li ...

  8. 利用SharedPreferences完成记住账号密码的功能

    利用SharedPreferences完成记住账号密码的功能 效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 Sh ...

  9. Gridview表格控件

    Gridview表格控件 效果图: 分析: 使用和ListvVew很像,都是经过适配器将数据绑定到控件上 具体步骤如下: 1.创建GridView控件,并指定列数 android:numColumns ...

  10. Tool-Java：Eclipse

    ylbtech-Tool-Java:Eclipse Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,E ...