当使用preventDefault时，单选按钮被选中的属性没有设置

Question

我遇到的问题是我的场景中的单选按钮在被单击时未被选中。我创建了一个JSFiddle来显示代码和问题。

无论出于何种原因，我都有一个被元素包围的整个区域。

<a href="/link"> 
    //some stuff 
    <div class="protected"> 
     <input type="radio" name="b1" value="1" /> Button 1 
     <input type="radio" name="b1" value="2" /> Button 2 
    </div> 
    //some stuff 
</a> 

此标签中有一小部分需要受到保护以免受链接的默认行为影响。本节包含一些需要选择的无线电输入。

我现在有它，我保护与事件侦听器的“保护”部分和方式：

$('.protected').off('click').on('click', function (e) { 
    e.preventDefault(); 
}); 

我也有单选按钮的事件侦听器，这样我可以执行的变化财产被点击时。

$('.protected > :radio').off('click').on('click', function (e) { 
    $(this).siblings(':radio').removeAttr('checked'); 
    $(this).attr('checked', 'checked'); 
}); 

不幸的是，这是在dom中设置checked属性，但单选按钮未被填充到屏幕上供用户使用。

任何帮助将不胜感激。

Answer 1

您需要添加stopPropagation()

$('.protected > :radio').off('click').on('click', function (e) { 
    e.stopPropagation(); 

    //$(this).siblings(':radio').removeAttr('checked'); 
    //$(this).attr('checked', 'checked'); 
}); 

此外，确保注释掉

$(this).siblings(':radio').removeAttr('checked'); 
$(this).attr('checked', 'checked'); 

的浏览器为您处理此你不需要他们。

DEMO

发生了什么事是，因为你必须在容器中单击处理preventDefault，嵌套的单击事件被传播到单击处理程序，并防止被设置的单选按钮。