单选按钮设置上的jQuery单击/更改功能

Question

我有一个名为"pick_up_point"的单选按钮.有3个选项,单击选项将显示与该选项相关的一组输入字段.

现在默认情况下,当用户单击某个选项时,我运行change()函数,该函数将运行一个名为"clearInputFields"的函数 - 您可能会猜到这将清除输入字段中输入的任何文本.

$("input[name='pick_up_point']").change(function()
{
 clearInputFields(); 
});

现在我尝试扩展它,以便向用户显示一个提示,让他们知道输入字段将被清除:

$("input[name='pick_up_point']").click(function(event)
{
 if(confirm('Address details will be cleared. Continue?'))
 {
  return true;
 }
 else
 {
  return false;
 }
});

"点击"功能在"更改"功能之前.

这在Firefox中"正常",在IE中无法正常工作.

在Firefox中,单选按钮被选中并显示提示,单击取消按钮将返回上一个选项,并保留所有值.

在IE中,单选按钮被选中并显示提示但是值被清除.如果单击"取消",则不会选择单选按钮.

我想这样做的方法是,如果你点击另一个单选按钮,它不应该选择它,除非你在提示上单击确定.如果单击"取消",则应保留值.

Answer 1

在IE中,change复选框和单选按钮上的事件不会立即触发,而是仅在字段未聚焦之后触发.通过这种方式,它的行为类似于文本输入框.

jQuery change以一种隐藏此行为的方式对事件非常重要.但是,它无法准确地再现IE中其他浏览器的行为,因此在某些情况下,change即使另一个click事件处理程序试图阻止默认,它也会响应与元素的交互而触发.

另一个问题:在IE中,如果你return false从click单选按钮,新的单选按钮就不会得到遏制,但前面的按钮仍然会失去其checkedness,让你没有收音机检查!

因此,您可能不得不进行某种恼人的状态跟踪,并在拒绝确认时手动将单选按钮恢复到旧状态.例如.:

var currentradio= $("input[name='pick_up_point']:checked")[0];
$("input[name='pick_up_point']").change(function(event) {
    var newradio= $("input[name='pick_up_point']:checked")[0];

    if (newradio===currentradio)
        return;
    if (confirm('Address details will be cleared. Continue?')) {
        clearInputFields();
        currentradio= newradio;
    } else {
        currentradio.checked= true;
    }
});