jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同-CSDN博客

本文深入探讨了jQuery中事件绑定的方法，对比分析了$(选择器).click(fn)与$(document).on('click', '要选择的元素', function(){}

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

文章作者：热爱前端的17号诶
文章地址：https://www.cnblogs.com/sqh17/p/7746418.html

解决：动态创建的元素的事件绑定不上

jQuery的区别： $() . c l i c k () 和$ (document).on(‘click’,‘要选择的元素’,function(){})的不同

前言

jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿 $() . c l i c k () 和$ (document).on(‘click’,‘要选择的元素’,function(){})来说，都是点击事件的操作，但是也有不同的地方。

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

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

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="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. $(document).on(‘click’,‘要选择的元素’,function(){})

on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="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>

结果如下：动态添加的元素也能被点击触发函数。
在这里插入图片描述

知识补充

$() . o n () 的知识点补充： 1 . 从 j Q u e r y 1.7 开始， o n () 函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的 b i n d () 、 d e l e g a t e () 、 l i v e () 等事件函数。$ ().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
　　　　 $() . l i v e () 是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 d o c u m e n t D O M 节点上。$ ().delegate()是更精确的小范围的使用事件代理。
　　　$().on()结合了这三个方法的优势摒弃了劣势。