js中事件绑定,$("body").on("click")与$("").click()区别

最新推荐文章于 2025-06-14 09:00:00 发布

Always_OL

最新推荐文章于 2025-06-14 09:00:00 发布

阅读量1.9w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/nideshijian/article/details/52748576

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在jQuery中处理动态元素的点击事件时遇到的问题，并对比了使用element.click和on的不同效果及适用场景。

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

编辑对照：https://jsfiddle.net/

<dl>
     <dt>性别</dt>
     <dd>
            <a href="javascript:void(0);" class="sex_icon set_icon"></a><p>男</p>
            <a href="javascript:void(0);" class="sex_icon set_icon"></a><p>女</p>
            <a href="javascript:void(0);" class="sexon_icon set_icon"></a><p>保密</p>
            </dd>
</dl>

这是一个选择男、女、保密的功能
但下面的 js 一个有问题，一个成功：

有问题、有bug的：

 $(".sex_icon").click(function(){
        $(this).removeClass().addClass("sexon_icon set_icon").siblings("a").removeClass().addClass("sex_icon set_icon");      
    });

    或者是：

    $(".sex_icon").click(function(){
        $(this).removeClass("sex_icon").addClass("sexon_icon").siblings("a").removeClass("sexon_icon").addClass("sex_icon");

    });

下面是成功的、无问题的：

 $("body").on("click",".sex_icon",function(){
         $(this).removeClass("sex_icon").addClass("sexon_icon").siblings("a").removeClass("sexon_icon").addClass("sex_icon");
    });

解析：其实只有两个a标签被绑定了click事件，即男和女的这两个选项前面的a标签。因为它们都有sex_icon的class。代码中的保密选项因为没有sex_icon的class，所以没有被绑定click事件，后来它有了sex_icon的class，那是因为另外两个选项的点击事件代码里面给的。也就是动态给的sex_icon样式。但是element.click这种写法不支持给动态元素或者样式重新绑定事件。

支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。