首页 > 代码库 > click()、bind()、live()和delegate()方法
click()、bind()、live()和delegate()方法
我之前使用click()比较多,又来因为网页内容需要前端生成用了live().有的时候使用click()和bind()分不清楚该怎么试用.查了很多资料.测试了很多次,自己明白了.
总结如下:代码注释很详细,感觉不用在分段写了.都写在一起了.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="#">点击</a> 9 <div class="box" style="cursor:pointer;">live</div>10 <div id="test"><a href="#">live支持链式编程吗?</a></div>11 <script type="text/javascript" src="js/jquery-1-8-3.js"></script>12 <script type="text/javascript">13 $(function(){14 $("<div class=‘box2‘ style=‘cursor:pointer;‘>live</div>").appendTo("body");15 });16 $("a").click(function(){17 console.log("click");18 });19 /***20 *click()方法是bind()方法的一种简单方法.21 * 在bind()中, jQuery所有JavaScript事件对象, 比如focus, mouseover, resize, mousemove和mouseout,都可以作为type参数传递进来的.22 */23 var message = "left";24 $("a").bind("click",{ msg: message }, function(e) {25 console.log(e.data.msg);26 return false;27 });28 var message = "right";29 $("a").bind("contextmenu",{ msg: message }, function(e) { //contextmenu:鼠标右击与键盘的菜单触发键30 console.log(e.data.msg);31 return false;32 });33 /***34 * 这样当我们左键单击<a>时，输出"left";当右键单击<a>时，输出"right".35 */36 37 /***38 * live()给所有匹配的元素附加一个时间处理函数, 即使这个元素是以后添加进来的也有效.39 */40 $("div.box").bind("click", function() {41 console.log("success bind");42 });43 44 /***45 * 当点击class="box"为live时, 打印出success.46 * 此时,如果有新元素添加进来,该如何操作?47 * 这时, 当使用上边方法点击class为live的a标签时, 不会执行.48 * 原因:这个元素是在调用bind()之后添加的, 而使用live方法使得在后边添加的元素也能够执行相应的事件.49 */50 $("div.box2").live("click", function() {51 console.log("success live");52 });53 /***54 * live()方法不支持链式编程55 */56 $("#test").children("a").live("mouseover", function() {57 console.log("支持链式编程");//报错,不支持链式编程 Error: Syntax error, unrecognized expression: #test.children(a)58 });59 60 /***61 * 上面这种写法并不会输出, 我们这个时候可以使用delegate()62 */63 $("#test").delegate("a", "mouseover", function() {64 console.log("delegate");65 });66 /***67 * 这样就可以输出想要的结果.68 */69 </script>70 </body>71 </html>
click()、bind()、live()和delegate()方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。