随笔 - 96, 文章 - 42, 评论 - 6, 阅读 - 18万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="val" type="text" />
<input id="add" type="button" value="添加" />
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $('#add').click(function () {
        var tag = document.createElement('li');
        var v = $('#val').val();
        $(tag).text(v);
        $('ul').append(tag);
    });
 
//    //第一种常见绑定方式,也是最常用的
//    $('li').click(function () {
//        alert($(this).text());
//    });
 
//    //第二种绑定方式 bind有与之对应的unbind
//    $('li').bind('click',function () {
//        alert($(this).text());
//    });
 
    //第三种绑定方式,功能很强大,可以让之后新添加的标签也有单击事件
    $('ul').delegate('li','click',function () {
        alert($(this).text());
    });
//   //第四种绑定方式 on 其实以上三种方式都是通过包装on实现的
//    $('li').on('click',function () {
//        alert($(this).text());
//    });
</script>
</body>
</html>

  

努力加载评论中...
点击右上角即可分享
微信分享提示