单选按钮Onclick事件需要两次点击才能在Firefox上执行/执行 [英] Radio Button Onclick Event Requires Two Clicks to Fire/Execute on Firefox

问题描述

我基本上有3个单选按钮和3个文本输入框（见下面的代码）：

 < input type =radioname =group1id =preloadedvalue =preloaded_imgchecked =checkedonclick = SetVals（）; /> 
< input type =textname =text1id =text1/> 
 
< input type =radioname =group1id =customvalue =custom_imgonclick =SetVals（）; /> 
< input type =textname =text2id =text2/> 
 
< input type =radioname =group1id =vectorvalue =vector_imgonclick =SetVals（）; /> 
< input type =textname =text3id =text3/> 
  

现在，每当我点击一个特定的单选按钮，其他两个按钮的文本输入元素应该得到清除，也变成残疾人（见下面的代码）。
$ b $ pre $ 函数SetVals（）{/ /使用JQuery +直JS这个...
$（document）.ready（function（）{
$（：radio）。click（function（event）{

// use event .target来确定单击哪个单选按钮
if（event.target.id ==preloaded）{
document.getElementByID（text1）。disabled = false;
$（ ＃text2）。val（）;
$（＃text3）。val（）;
document.getElementById（text2）。disabled = true;
document.getElementById（text3）。disabled = true;

} else if（event.target.id ==custom）{
document.getElementByID（text2） （＃text1）。val（）;
$（＃text3）。val（）;
document.getElementById（ text1）。disabled = true;
document.getElementById（text3）。disabled = TRUE;

} else if（event.target.id ==vector）{
document.getElementByID（text3）。disabled = false;
$（＃text1）。val（）;
$（＃text2）。val（）;
document.getElementById（text1）。disabled = true;
document.getElementById（text2）。disabled = true;
}
}）;
}）;



$ b $ p
$ b

另外，当页面最初加载时，text2和text3输入字段是通过JavaScript禁用，默认情况下检查text1字段：

  document.getElementById（text2）。disabled = true; 
 document.getElementById（text3）。disabled = true; 
  

我遇到的问题是需要2（2）次点击才能使其工作Firefox浏览器。在Internet Explorer中，它按预期工作。

所以，第一次点击一个单选按钮 - 没有任何反应。再次单击时，即触发Onclick事件。

注意：我为此使用了JQuery，但是也使用了直接的Javascript来取消。

您可以简单地复制代码并粘贴到编辑器中，然后用Firefox打开页面，直接查看问题。

有其他人遇到过吗？这是一些Firefox的错误？如果是这样，是否有解决方法？

任何和所有帮助，意见，建议和输入是受欢迎的。

$ b $因为你正在使用jQuery为单选按钮点击分配事件处理程序，所以你必须使用jQuery可以删除 onClick 属性。

这应该适合您：
$ b $（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ preloaded）{
$（＃text1）。removeAttr（disabled）;
$（＃text2，＃text3）。val（）。attr（disabled ，true）;
} else if（this.id ==custom）{
$（＃text2）。removeAttr（disabled）;
$（＃text1 ，＃text3）。val（）。attr（disabled，true）;
} else if（this.id ==vector）{
$（＃text3） .removeAttr（disabled）;
$（＃text1，＃text2）.val（）。attr（disabled，true）;
}
}）;
$（＃text2，＃text3）。val（）。attr（disabled，true）;
}）;


Hoping someone has a solution to this weirdness on Firefox 3.

I basically have 3 radio buttons and 3 text input fields (see following code):

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1"  id="text1" />

<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2"  id="text2" />

<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3"  id="text3" />

Now, every time I click on a specific Radio Button, the text input elements for the other two buttons should get cleared and also become disabled (see following code).

function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
 $(":radio").click(function(event) {

// use event.target to determine which radio button was clicked
   if (event.target.id=="preloaded") {
    document.getElementByID("text1").disabled=false;
    $("#text2").val("");
    $("#text3").val("");
    document.getElementById("text2").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="custom") {
    document.getElementByID("text2").disabled=false;
    $("#text1").val("");
    $("#text3").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="vector") {
    document.getElementByID("text3").disabled=false;
    $("#text1").val("");
    $("#text2").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text2").disabled=true;
   }
 });
});
}

Also, when the page is initially loaded, the text2 and text3 input fields are disabled via javascript as the text1 field is checked by default:

document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;

The problem I'm having is that it requires 2 (two) clicks to get this to work on Firefox. On Internet Explorer, it works as expected.

So, when clicking on a radio button the first time - nothing happens. When clicking on it a second time, that's when the Onclick Event is triggered.

NOTE: I'm using JQuery for this, but have also used straight Javascript to no avail.

You can simply copy and paste my code on an editor and open the page with Firefox to see issue firsthand.

Has anybody else encountered this? Is it some sort of Firefox bug? If so, is there a work-around?

Any and all help, comments, suggestions, and input are welcome.

Thanks in advance!

解决方案

Since you are using jQuery to assign the event handler for the radio button click, you can remove the onClick attribute.

This should work for you:

$(function() {
    $(":radio").click(function(event) {
        if (this.id == "preloaded") {
            $("#text1").removeAttr("disabled");
            $("#text2, #text3").val("").attr("disabled", true);
        } else if (this.id == "custom") {
            $("#text2").removeAttr("disabled");
            $("#text1, #text3").val("").attr("disabled", true);
        } else if (this.id == "vector") {
            $("#text3").removeAttr("disabled");
            $("#text1, #text2").val("").attr("disabled", true);
        }
    });
    $("#text2, #text3").val("").attr("disabled", true);
});

Code example on jsfiddle.

Side note: since you are using jQuery you might as well use jQuery for almost all dom interactions since mixing the two will eventually lead to some pain. Let jQuery hide the inconsistencies in browsers.

这篇关于单选按钮Onclick事件需要两次点击才能在Firefox上执行/执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！