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中。 Haven没有测试过其他人。

更新：

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

看到这个jsfiddle。我已经包含了jQuery mobile的外部资源。如果我这样做，所需的行为将消失，即使已经选中了单选按钮，也会触发.change（）事件....

我在这里想念的是什么？谢谢你的帮助!!

Answer 1

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

Answer 2

只有第一次点击未选中的单选按钮才会触发 .change（）事件并显示一些输出。在我的页面上，它始终不会触发如果已经检查了单选按钮，那么就没有问题变化

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我认为问题是你的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'));
  });
});

你的选择器＆amp;控制台日志语句格式不正确，但使用上面的CodePen，日志语句仅在进行更改时触发;如果反复单击当前选中的单选按钮，则控制台中不会显示任何内容。

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

3 个答案: