Javascript Firefox：单击并更改未附加到文档树中的复选框元素上的事件

我用一个无线电组创建了一段HTML代码。但是我没有将这个片段附加到文档树中，因为我需要使用第一个radio元素的click事件来配置这个片段，然后才能将它显示给用户

我使用JQuery设置单击处理程序。之后，我通过input.click（）调用这个处理程序。该处理程序可以工作，但在未将radio元素追加到文档树中之前，签入radio元素的属性不会更改。只有FF的行为如此-其他浏览器（例如，Chrome、Safari）更改此属性。当我将radio元素附加到文档树中时，FF可以更改此属性。你能给我解释一下为什么FF会这样吗

$（函数（）{
$（'#do'）。单击（函数（）{
变量输入1=$（''）；
输入1.单击（函数（）{
console.log（'click=>'+（this.checked？'true'：'false'）；
});
input1.change（函数（）{
log（'change=>'+（this.checked？'true'：'false'）；
});
input1.click（）；//输出：click=>false
$（“#结果”）.append（input1）；/*将追加未选中的元素*/
});
});

点击我
可能是FF中的错误，.click（）在FF中不起作用

您可以通过以下方式在所有浏览器中实现选中功能：

input1[0].setAttribute('checked', 'checked');


在SO中找到一个类似的问题

我必须使用click handler，因为它声明组件状态之间和数据之间的关系。我已经想到了为这种情况做自己的点击方法。但是我仍然希望它没有必要不理解“它声明组件状态之间和数据之间的关系”，但是您可以将“input1[0].setAttribute（'checked'，'checked'）；”包装到自定义输入中。单击函数为了达到您的目的，下一次单击事件时会发生什么？指令“input.setAttribute（“checked”、“checked”）”不会停用此元素。它将永远被“检查”。它需要设置自己的属性（例如“\u chd”），并通过checkbox.checked=checkbox.\u checked=checkbox在每次单击事件时更改此属性！复选框。检查DOM元素之间的关系：例如，如果选中复选框，则某些DOM容器可见，但如果未选中复选框，则容器隐藏。这是一个简单的例子。事实上，关系更为复杂。只有处理程序可以调节这种关系。您可以绑定自定义单击事件，并将属性设置为相反的值，如checked=！currentCheckedI也这么说：要做属性“\u checked”，每次单击都会更改该属性。最初的“checked”将等同于“u checked”，我在使用Karma运行单元测试时遇到了这个问题。我们的DOM元素都不在文档树中，因此在Firefox中测试复选框功能可能会失败，但会传入Chrome和PhantomJS。受下面的
setAttribute（）
解决方案的启发，我们使用jQuery的
attr（）
模拟检查。