jQuery 使用键盘选择单选按钮时不会触发更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4028936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change event not firing when radio button is selected with keyboard
提问by Greg
<script>
$("input[name='my_radio_button']").change(function(){
if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
do_this_stuff();
} else { do_other_stuff(); }
});
</script>
<input type="radio" name="my_radio_button1" id="radio1" value="ONE" checked />
<input type="radio" name="my_radio_button2" id="radio2" value="TWO" />
(assume complete HTML and the script firing when all is ready)
（假设完整的 HTML 和脚本在一切就绪后触发）
The change event seems to fire when clicking to select a radio option, but not when the selection is changed with keyboard. Can anything be done about this?
单击以选择单选选项时似乎会触发更改事件，但在使用键盘更改选择时不会触发。有什么办法可以解决这个问题吗？
edit - makes no difference if I use bindor live-- is this just a bug?
编辑 - 如果我使用bind或live- 这只是一个错误没有区别？
To clarify, the event does not fire even after focus is lost.
澄清一下，即使失去焦点，事件也不会触发。
edit 2 - nobody knows the reason for this?
编辑 2 - 没有人知道这是什么原因？
edit 3 - as DonaldIsFreak pointed out this seems to be a chrome problem
编辑 3 - 正如 DonaldIsFreak 指出的那样，这似乎是一个 chrome 问题
回答by John Hartsock
Here is a reliable fix http://evilstreak.co.uk/blog/fixing-change-events-on-radios
这是一个可靠的修复http://evilstreak.co.uk/blog/fixing-change-events-on-radios
And using it this is how you would implement it with your example: And here is a demoof the code below http://www.jsfiddle.net/uDkdJ/1/I tested this demo in FF3.6, IE8, Safari5, Chrome7, and Opera10.65
使用它，这就是你如何用你的例子来实现它：这里是下面代码的演示http://www.jsfiddle.net/uDkdJ/1/我在 FF3.6、IE8、Safari5 中测试了这个演示， Chrome7 和 Opera10.65
$.fn.fix_radios = function() {
function focus() {
if ( !this.checked ) return;
if ( !this.was_checked ) {
$( this ).change();
}
}
function change( e ) {
if ( this.was_checked ) {
e.stopImmediatePropagation();
return;
}
$( "input[name=" + this.name + "]" ).each( function() {
this.was_checked = this.checked;
} );
}
return this.focus( focus ).change( change );
}
$(function() {
$( "input[type=radio]" ).fix_radios();
$("input[name='my_radio_button']").change(function(){
if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
do_this_stuff();
} else { do_other_stuff(); }
});
});
回答by andres descalzo
In jquery 1.4.2 @ selector does not work. Look at this example to see if it is useful to you, change the "change" event per "click".
在 jquery 1.4.2 @ 选择器中不起作用。看看这个例子，看看它是否对你有用，每次“点击”更改“更改”事件。
html
html
<input type="radio" name="rdio" value="a" checked="checked" />
<input type="radio" name="rdio" value="b" />
<input type="radio" name="rdio" value="c" />
<br />
<div id="test"></div>
javascript:
javascript:
$("input[name='rdio']").click(function(){
if ($("input[name='rdio']:checked").val() == 'a')
$("#test").append("<div>a</div>");
else if ($("input[name='rdio']:checked").val() == 'b')
$("#test").append("<div>b</div>");
else
$("#test").append("<div>c</div>");
});
回答by Scott S
Unfortunately, radio buttons don't fire change events when changed with the keyboard, until you lose focus.
不幸的是，单选按钮在使用键盘更改时不会触发更改事件，直到您失去焦点。
If you want to work around this problem, you can always set up a timer that monitors the state, and dispatches an event when it changes. Something like (pseudocode):
如果你想解决这个问题，你总是可以设置一个计时器来监视状态，并在它发生变化时调度一个事件。类似（伪代码）：
var monitorRadio = function(radio)
{
var state = $("input[@name='']:checked").val();
$(radio).data("state", state);
var func = function()
{
var state = $("input[@name='']:checked").val();
if (state != $(radio).data("state"))
{
$(radio).data("state", state);
// dispatch the change event
$(radio).change();
}
setTimeout(100, func());
};
func();
}
回答by SooDesuNe
I'm not having much luck getting the radio button to change it's state with the arrow keys in my jsfiddle, so here's a blind answer:
我没有太多运气让单选按钮使用我的 jsfiddle 中的箭头键改变它的状态，所以这是一个盲目的答案：
Use .keypress()The same rule about not changing until loosing focus applies to select boxes, and I've successfully used .keypress()there
使用.keypress()关于在失去焦点之前不更改的相同规则适用于选择框，并且我已经成功地使用了.keypress()那里
回答by Nathan MacInnes
$("input[name='my_radio_button']").bind('change keypress', function(){
if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
do_this_stuff();
} else { do_other_stuff(); }
});
The problem with this method is that the event will fire once when the user presses a key, and again when it loses focus. I'm not sure what do_this_stuff()and do_other_stuff()do, but if them firing more than once is a problem, you could fix this with a var to check what the previous value was, so you know if it's actually changed:
这种方法的问题在于，当用户按下某个键时，该事件将触发一次，而在失去焦点时再次触发。我不确定是什么do_this_stuff()和do_other_stuff()做什么，但是如果它们多次触发是一个问题，您可以使用 var 修复此问题以检查以前的值是什么，这样您就知道它是否真的改变了：
$("input[name='my_radio_button']").bind('change keypress', function(){
if ($(this).value() != prevValue) {
if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
do_this_stuff();
} else { do_other_stuff(); }
}
prevValue = $(this).value();
});
