jquery事件绑定

最新推荐文章于 2025-12-11 16:09:33 发布

转载最新推荐文章于 2025-12-11 16:09:33 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wayaoyao/p/10879542.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery库中的bind方法为HTML列表项绑定点击事件的方法。通过该方法可以实现当点击列表项时弹出对应的列表项文本内容。文中提供了一个具体的HTML和JavaScript实例。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="http://code.jquery.com/jquery-latest.js"></script>
 9 </head>
10 <body>
11     <ul>
12         <li>1</li>
13         <li>2</li>
14         <li>3</li>
15         <li>4</li>
16         <li>5</li>
17         <li>6</li>
18         <li>7</li>
19         <li>8</li>
20     </ul>
21     <script>
22         //on方法事件绑定  delegate
23         // $('ul').on('click','li',function(event){
24         //     var tag = $(event.target);
25         //     alert(tag.text());
26         // })
27         //bind方法
28         $('ul').bind('click','li',function(event){
29             var tag = $(event.target);
30             if(tag.prop('nodeName') == 'LI'){
31                 alert(tag.text());
32             }
33         });
34     </script>
35 </body>
36 </html>