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还有许多这样的例子,都是一样的解决办法。

原文地址:https://www.cnblogs.com/xiaochongchong/p/5498676.html