单选按钮集上的 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事件处理程序尝试阻止Default。

另一个问题:在 IE 中，如果 return false来自click在单选按钮上，新的单选按钮不会被选中，但前一个按钮仍然会失去其选中状态，从而使您没有选中任何单选按钮!

因此，您可能需要进行某种烦人的状态跟踪，并在确认被拒绝时手动将单选按钮恢复到原来的状态。例如:

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;
    }
});