问题描述

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

 <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");
    });

以上2种均在浏览器点击时无报错！
求大神 解释！它们有什么区别！！！

解决方案

你虽然你自己说了："我点中的元素 添加被选中的样式"。但这不是你的问题的关键。你的问题的关键是哪些元素被绑定了click事件。你以为三个a标签都被绑定了click事件是吗？其实只有两个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的第二个参数里面。

我做了一个在线演示，在你的click事件中添加了一个alert来显示点击的那个选项的内容，你会发现点击男或者女的时候，会有alert，但是点击保密的时候没有alert。希望这样的实例演示能帮助理解。

解决方案二：

http://www.cnblogs.com/weihengblogs/p/3433154.html

解决方案三：

这三个公共的class是set_icon吧，不是sex_icon

解决方案四：

参考jQuery 属性操作 - removeClass() 方法

removeClass() 方法从被选元素移除一个或多个类。
注释：如果没有规定参数，则该方法将从被选元素中删除所有类。

区别:
首先，如果没有给removeClass指定类，则移除这个元素的所有类。
其实，你一个是addClass("sexon_icon set_icon")，添加的是两个类，另一个是addClass("sexon_icon")， 添加的是一个类

参考Jquery .on() method not working on dynamic content
另外你说的 $(".sex_icon")这个如果没有反应，请先确定一下你的sex_icon这些元素是页面原先就有的还是动态添加到DOM上的。on前面的元素必须是在调用代码的时候已经存在。

解决方案五：

这个没反应很正常吧，你是把点击对象删除了，删除了，对象都不存在了怎么往后执行
你下面那个是因为点击的对象跟删除的对象不是同一个，当然可以成功

解决方案六：

应该是你放代码的位置有问题导致元素找不到，你放到$(function(){。。。。})里面没有，或者你的html代码后面

就你发的2个代码基本没有差别。。都是点击.sex_icon选中的元素时触发。。如果on没有指定selector，那么事件就只有body响应了。

API：http://api.jquery.com/on/