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

当使用preventDefault时，单选按钮检查属性未设置

1 个答案: