我之前使用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>
时间： 2024-10-19 22:12:40