事件委托 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <ul>
 9     <li>锄禾日当午</li>
10     <li>汗滴禾下土</li>
11     <li>谁知盘中餐</li>
12     <li>粒粒皆辛苦</li>
13 </ul>
14 <button>添加</button>
15 <script src="jquery-3.3.1.min.js"></script>
16 <script>
17     // 事件表达方式一：
18     // $('ul li').click(function () {
19     //     alert(1111)
20     // });
21 
22     // 事件表达方式二bind(函数名，函数)
23     // $('ul li').bind('click',function () {
24     //     alert(22222)
25     // });
26     //
27     $('button').click(function () {
28         var $ele=$('<li>');
29         var len=$('ul li').length;
30         $ele.html(len+1);
31         $('ul').append($ele)
32 
33     });
34 
35 
36 
37     // 事件委托
38     $('ul').on('click','li',function () {
39         alert(0000)
40     })
41 </script>
42 </body>
43 </html>

 

posted on 2018-11-11 17:09  lfylcj  阅读(92)  评论(0)    收藏  举报

导航