zoukankan      html  css  js  c++  java
  • 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还有许多这样的例子,都是一样的解决办法。

  • 相关阅读:
    django模型系统(二)
    css基础
    css进阶
    django模型系统(一)
    自定义过滤器及标签
    django模板标签
    模板变量及模板过滤器
    第六章 异常
    第三章:多态
    第三章:提高系统性能:从数据访问开始
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/5498676.html
Copyright © 2011-2022 走看看