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()方法的一点问题

最新文章

热门文章