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移动设备的单选按钮，一切都按预期工作。仅当我选择未选中的单选按钮时才会触发更改事件。如果我点击已经检查过的单选按钮，则没有任何反应。

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

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

如果尚未选中单选按钮，则所需的行为是仅触发更改事件。我如何使用jQuery移动样式的单选按钮实现这一目标？

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

即使已经检查过jQuery移动单选按钮更改事件也始终触发

1 个答案: