click()、bind()、live()和delegate()方法

我之前使用click()比较多,又来因为网页内容需要前端生成用了live().有的时候使用click()和bind()分不清楚该怎么试用.查了很多资料.测试了很多次,自己明白了.

总结如下:代码注释很详细,感觉不用在分段写了.都写在一起了.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <a href="#">点击</a>
 <div class="box" style="cursor:pointer;">live</div>
 <div id="test"><a href="#">live支持链式编程吗?</a></div>
 <script type="text/javascript" src="js/jquery-1-8-3.js"></script>
 <script type="text/javascript">
     $(function(){
         $("<div class='box2' style='cursor:pointer;'>live</div>").appendTo("body");
     });
     $("a").click(function(){
         console.log("click");
     });
     /***
      *click()方法是bind()方法的一种简单方法.
      * 在bind()中, jQuery所有JavaScript事件对象, 比如focus, mouseover, resize, mousemove和mouseout,都可以作为type参数传递进来的.
      */
     var message = "left";
     $("a").bind("click",{ msg: message }, function(e) {
         console.log(e.data.msg);
         return false;
     });
     var message = "right";
     $("a").bind("contextmenu",{ msg: message }, function(e) { //contextmenu:鼠标右击与键盘的菜单触发键
         console.log(e.data.msg);
         return false;
     });
     /***
      * 这样当我们左键单击<a>时，输出"left";当右键单击<a>时，输出"right".
      */

     /***
      * live()给所有匹配的元素附加一个时间处理函数, 即使这个元素是以后添加进来的也有效.
      */
     $("div.box").bind("click", function() {
         console.log("success bind");
     });

     /***
      * 当点击class="box"为live时, 打印出success.
      * 此时,如果有新元素添加进来,该如何操作?
      * 这时, 当使用上边方法点击class为live的a标签时, 不会执行.
      * 原因:这个元素是在调用bind()之后添加的, 而使用live方法使得在后边添加的元素也能够执行相应的事件.
      */
     $("div.box2").live("click", function() {
         console.log("success live");
     });
     /***
      * live()方法不支持链式编程
      */
     $("#test").children("a").live("mouseover", function() {
         console.log("支持链式编程");//报错,不支持链式编程  Error: Syntax error, unrecognized expression: #test.children(a)
     });

     /***
      * 上面这种写法并不会输出, 我们这个时候可以使用delegate()
      */
     $("#test").delegate("a", "mouseover", function() {
         console.log("delegate");
     });
     /***
      * 这样就可以输出想要的结果.
      */
 </script>
 </body>
 </html>