jQuery 移动单选按钮更改事件始终触发，即使已选中也是如此

Question

我正在使用包含两个单选按钮的单选按钮组来根据选中的单选按钮动态更改我的页面内容。当 selected 单选按钮更改时，应更新内容。因此，我向单选按钮添加了一个事件处理程序。

html:

<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center" >
    <input name="radio" id="radio-a" type="radio" >
    <label for="radio-a">a → b</label>
    <input name="radio" id="radio-b" type="radio">
    <label for="radio-b">b → a</label>
</fieldset>

jQuery:

$(document).ready(function() {
    $(":input[name= 'radio']").on('change', function(){
        alert("DO SOMETHING");
    });
});

如果我在没有 jQuery 移动设备的情况下使用一些单选按钮，一切都会按预期工作。仅当我 select 未选中的单选按钮时才会触发更改事件。如果我点击一个已经选中的单选按钮，什么也不会发生。

请参阅此 jsfiddle 进行演示： https://jsfiddle.net/6cnLgonk/21/

如果我现在包含 jQuery 移动设备的 js 和 css，更改事件总是会触发，无论单选按钮是否已被选中： https://jsfiddle.net/6cnLgonk/19/ 请注意，代码完全相同，我只链接了 jQuery 移动文件，让单选按钮自动获取样式。

期望的行为是仅在尚未选中单选按钮时才触发更改事件。我如何使用 jQuery 移动式单选按钮完成此操作？

jQuery 移动 js 是否以某种方式覆盖了更改事件？我是否必须以某种方式手动设置单选按钮？感谢您的回答。

Answer 1

jQuery Mobile 实际上用标签 dom 元素替换了单选输入，并将点击处理程序添加到这些标签，然后触发底层单选按钮上的更改事件。

您可以为每个单选按钮添加一个值属性：

<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center" >
    <input name="radio" id="radio-a" type="radio" value="a" />
    <label for="radio-a">a → b</label>
        <input name="radio" id="radio-b" type="radio" value="b" />
    <label for="radio-b">b → a</label>
</fieldset>

然后就可以保存当前的选择，然后查看了：

var CurrentSelection;
$(document).ready(function() {
    $(":input[name= 'radio']").on('change', function(){
        var clicked = $(this).val();
        if (clicked != CurrentSelection){
            CurrentSelection = clicked;
            alert("DO SOMETHING");
        }
    });
});

Updated FIDDLE

jQuery 移动单选按钮更改事件始终触发，即使已选中也是如此

jQuery mobile radio button changed event always fires even if already checked

jquery

onchange

event-handling

radio-button

jquery-mobile