$().click()和$().on('click',function(){})的区别

最新推荐文章于 2022-03-09 19:22:19 发布

枫林晚。

最新推荐文章于 2022-03-09 19:22:19 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_40315045/article/details/102712955

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文详细解析了jQuery中click和on方法的使用差异，click适用于页面加载时已存在的元素，而on则支持动态添加的元素，展示了如何通过实例代码实现两者的不同效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$() . c l i c k () 和$ ().on(‘click’,function(){})的区别

1. $(选择器).click(fn)

当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
        $('ul>li').click(function() {
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>

后面动态创建的5和6，没法进行点击事件触发。

2. $(选择器).on(‘click’,function(){})

on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
（支持动态绑定元素，即页面上元素有添加或变化后仍可绑定,前提是‘选择器’须是目标绑定元素的父元素）

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
        $('body').on('click', 'ul>li', function() {
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>

动态添加的元素也能被点击触发函数。