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()方法的一点问题的更多相关文章

  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. [luogu2054 AHOI2005] 洗牌 (数论)

    传送门 Solution 我们考虑每一步牌的变化: 前半部分的牌位置*2 后半部分的牌位置*2-n-1 那么我们可以看做是\(x\times 2^m\equiv l \pmod n\) 于是求个逆元就 ...

  2. [tyvj1957 Poetize5] Vani和Cl2捉迷藏 (最小路径可重点覆盖+二分图最大匹配)

    传送门 Description 这片树林里有N座房子,M条有向道路,组成了一张有向无环图. 树林里的树非常茂密,足以遮挡视线,但是沿着道路望去,却是视野开阔.如果从房子A沿着路走下去能够到达B,那么在 ...

  3. 使用for或while循环来处理处理不确定页数的网页数据爬取

    本文转载自以下网站: Python For 和 While 循环爬取不确定页数的网页  https://www.makcyun.top/web_scraping_withpython16.html 需 ...

  4. linux 中使用iptables 防止ddocs及cc攻击配置 。

    #防止SYN攻击,轻量级预防 iptables -N syn-floodiptables -A INPUT -p tcp –syn -j syn-floodiptables -I syn-flood ...

  5. PHP tools for Visual Studio 2013 安装、破解、配置教程

    安装 首先,必须要安装vs2013.本人安装的是社区版,免费的同时功能又全面. 然后,去http://download.csdn.net/detail/liangzehong007/9076855 或 ...

  6. 24 Point game

    24 Point game 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 There is a game which is called 24 Point game ...

  7. String 经常用法最优算法实现总结 (一)

    <pre name="code" class="java"><span style="font-family: Arial, Hel ...

  8. Android之旅十六 android中各种资源的使用

    android中各种资源的使用: 在android开发中,各种资源的合理使用应该在各自的xml中进行定义,以便反复使用; 字符串资源:strings.xml,xml中引用:@string/XXX,ja ...

  9. #leetcode#Anagrames

    Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...

  10. [Linux]RedHat Linux 忘记rootpassword该怎样又一次设置password

    1. 开机在出现grub画面,按e键,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvU3VubnlZb29uYQ==/font/5a6 ...