不知为何这个JQ事件总是执行两次，怎么修正

不知为何这个JQ事件总是执行两次，如何修正？
本帖最后由 kinghome 于 2013-06-06 19:27:07 编辑 不知为何这个JQ事件总是执行两次，如何修正？

$("fieldset[data-FormUi=radio]").on("click",function(e){
var target = $(e.currentTarget),
tagName = target.attr("name"),
stuta = target.attr("data-activity");
/*判断当前状态*/
if(stuta == undefined)
stuta = false;
else
stuta =  Boolean(stuta);

/*修改当前状态*/
var setStateVal = stuta ? "false":"true";
target.attr("data-activity",setStateVal);

e.stopPropagation();
})

<div class="grid-a">
                     <div class="cell">
                         <fieldset data-FormUi="radio"  name="sexgroup">
                            <label>
                                Man <input type="radio" value="man" name="sex" style="display:none"/>
                                </label>
                            </fieldset> 
                         </div>
                        <div class="cell"> 
                         <fieldset data-FormUi="radio" name="sexgroup">
                            <label>
                                Woman <input type="radio" value="woman" name="sex"  style="display:none"/>
                                </label>
                            </fieldset> 
                        </div>
                     </div>

[解决办法]

<label>Man<input type="radio" value="man" name="sex" style="display:none"/></label>

吧input放在label标签外面

<label>Man</label>
<input type="radio" value="man" name="sex" style="display:none"/>

[解决办法]
问题出在label元素上，label 比较特殊，点击label时会触发其此标签相关的表单控件的点击事件。
这样，点击label时，label的事件冒泡给父级元素fieldset，同时出发radio元素的点击事件，也冒泡给祖先元素fieldset，所以fieldset上的点击事件触发两次。这也说明另一个现象：只有点击label里面的文字时才会触发两次，点击之外的区域只触发一次。

查看更多 下一篇