jQuery 更改事件始终在已选中的单选按钮上触发

Question

我有一个奇怪的问题，已经让我把头撞在墙上好几个小时了。我正在使用 jQuery 将事件监听器添加到一个控制组内的两个单选按钮。更改的事件触发 ajax 请求，并且响应用于交换单选按钮下方的网页部分。单选按钮本身不会交换。

jQuery 代码:

$(document).ready(function() {
    $(":input[name= 'radio-choice-h-2']").on('change', function(){
        $.post("process.php", {direction: $(this).attr("value"), lektion:$("#h1").text() + ".txt"})
            .done(function(data) {
                $(".question").html(data).trigger("create");
            })
            .fail(function(jqXHR, textStatus, errorThrown){
                alert(textStatus, errorThrown);
            });
    });

html 代码:

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

问题是，即使单选按钮已被选中，更改事件也始终会触发。我还检查了单选按钮是否确实通过记录其检查状态进行了检查，如下所示:

$(document).ready(function() {
   $(":input[name= 'radio-choice-h-2']").on('change', function(){
      console.log('#radio-choice-h-2a').is(':checked');
      console.log('#radio-choice-h-2b').is(':checked');
});

输出始终

true
false

用于第一个按钮，反之亦然用于第二个按钮。我本来期望，如果值发生变化，这只会输出，但无论值是否发生变化，它总是输出。我使用的是 jQuery 2.1.3，问题至少存在于 Firefox 和 Chrome 中。没有测试过其他人。

更新:

http://jsfiddle.net/6cnLgonk/15/

参见这个jsfiddle。我已经包含了 jQuery mobile 的外部源。如果我这样做，所需的行为就会消失，并且即使单选按钮已被选中，.change() 事件也始终会被触发......

我在这里错过了什么？感谢您的帮助!!

Answer 1

好吧，经过一番测试后，我发现这种不当行为的原因是 jQuery-mobile。每次，我都包含了 jQuery-mobile JS，就会出现错误行为。我查看了源代码，发现所有输入元素都被隐藏原始输入字段的 jQuery-mobile JS 替换为样式标签。问题是，单选按钮和复选框按钮的单击事件是一起处理的。每次在标签上触发单击事件时，都会在隐藏输入上触发更改的事件，无论它是否是单选/复选框按钮，也无论在单击之前是否已选中。我针对这个错误提出了一个问题。答案是，该错误不会得到修复，因为下一个 jQuery-mobile 版本将具有不同的单选/复选框按钮组件，这些组件不会遇到此问题。