即使已经选中，jQuery 移动单选按钮更改事件总是会触发

Question

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

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 mobile 的情况下使用一些单选按钮，一切都会按预期工作。仅当我选择未选中的单选按钮时才会触发更改事件。如果我单击已选中的单选按钮，则不会发生任何事情。

查看这个 jsfiddle 进行演示： https://jsfiddle.net/6cnLgonk/21/

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

所需的行为是仅在未选中单选按钮时才触发更改事件。我如何使用 jQuery mobile 样式的单选按钮完成此操作？

jQuery mobile 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");
        }
    });
});

更新FIDDLE