javascript - 当同时使用 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>

此标记内有一小部分需要保护，以免受到链接默认行为的影响。此部分包含一些需要可选择的 radio 输入。

按照我目前的方式，我使用事件监听器来保护“ protected ”部分，并且:

$('.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 中设置选中属性，但是单选按钮并未在用户的屏幕上填写。

任何帮助将不胜感激。

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，因此嵌套单击事件会传播到该单击处理程序，并阻止设置单选按钮。