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中，单选按钮被选中并显示提示，但值被清除。如果单击“取消”，则不会选择单选按钮。

我想要这样做的方法是，如果你点击另一个单选按钮，它不应该选择它，除非你在提示上单击OK。如果单击“取消”，则应保留值。

Answer 1

在IE中，复选框和单选按钮上的change事件不会立即触发，而是仅在字段未聚焦之后触发。这样它就像文本输入框一样。

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

另一个问题：在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;
    }
});

Answer 2

为了确保实际更改的选择将函数调用放在.change事件处理程序中并删除.click事件处理程序。

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

不确定你需要返回xx语句，但我不知道你们其余的代码库，所以我把它们留在那里。

编辑：

为了演示.change与.click（实际更改）的效果，我在这里放了一个小的演示：

http://jsfiddle.net/KMjan/

请注意，计数器会增加并显示在底部（不是花哨，但会显示点）

EDIT2：添加了一些关于在.click和.change中调用clear函数的效果的指示

http://jsfiddle.net/KMjan/1/

EDIT3：添加了另一个演示，我将事件气泡上的背景颜色设置为父div，以演示返回值的效果（true和false） - 只需单击相同的单选按钮多次，然后更改 - 使用负数和积极的答案来查看每个选择的结果。

http://jsfiddle.net/KMjan/3/

这些显示了您可能想要调查的事件传播方法的必要性，如果效果不符合要求有关事件传播的详细信息，请参阅此页面： http://api.jquery.com/category/events/

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

2 个答案: