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 移动设备的外部资源。如果我这样做，所需的行为就会消失，并且即使单选按钮已经被选中，.change() 事件也会始终被触发....

我错过了什么？感谢您的帮助！！

Answer 1

我认为问题出在你的 jQ - 稍微调整一下，我就可以在这里工作： http://codepen.io/anon/pen/vOJPMR

$(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'));
  });
});

您的选择器和控制台日志语句格式不正确，但使用上述 CodePen，日志语句仅在进行更改时触发；如果重复单击当前选定的单选按钮，控制台中不会出现任何内容。

Answer 2

only the first click on the unselected radio button should trigger the .change() event and show some output. on my page, it ALWAYS trigger no matter if the radio button is already checked and therefor doesn't change

尝试使用选择器$(":input[name='radio-choice-h-2']:not(:checked)")；将 .one() 替换为 .on()

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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" checked="checked">
  <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>

Answer 3

好的，经过一些测试后，我发现造成这种不当行为的原因是 jQuery-移动设备。每次，我都包含了 jQuery-mobile JS，显示了不当行为。我查看了源代码，发现所有输入元素都被隐藏原始输入字段的 jQuery-mobile JS 替换为样式标签。问题是，单选按钮和复选框按钮的点击事件是一起处理的。每次在标签上触发点击事件时，都会在隐藏输入上触发更改事件，无论它是否是 radio-/checkbox 按钮，也无论在点击前是否已检查。我为这个错误打开了一个问题。答案是，这个错误不会被修复，因为下一个 jQuery- 移动版本将有不同的 radio/checkbox 按钮组件，这些按钮不会遇到这个问题。

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

jQuery change event always fires on radio buttons already checked

jquery

onchange

radio-button

jquery-mobile