编辑对照: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的第二个参数里面。