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

Firefox: Click and change events on checkbox elements which are not appended into document tree

本文关键字：文档 复选框 事件 元素 Firefox      更新时间：2023-09-26

我用一个无线电组创建了一段HTML代码。但我没有将这个片段附加到文档树中，因为在向用户显示之前，我需要使用第一个单选元素的点击事件来配置这个片段。

我使用JQuery来设置点击处理程序。之后，我通过input.click（）调用这个处理程序。该处理程序可以工作，但radio元素中的属性CHECKED不会更改，直到radio元素没有附加到文档树中。只有FF会这样做——其他浏览器（IE、Chrome、Safari）会更改此属性。当我将radio元素附加到文档树中时，FF可以更改此属性。你能解释一下FF为什么这么做吗？

$(function() {
  $('#do').click(function() {
    var input1 = $('<input type="checkbox" id="checkbox1"></input>');
    input1.click(function() {
      console.log('click => ' + (this.checked ? 'true' : 'false'));
    });
    input1.change(function() {
      console.log('change => ' + (this.checked ? 'true' : 'false'));
    });
    input1.click(); // output: click => false
    $('#result').append(input1); /*Will append not checked element*/
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="do">Click me</button>
<div id="result"></div>

PS复选框元素也表现为

也许这是FF中的一个错误，.click（）在FF.中工作不好

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

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

plnkr

在SO.中找到类似的问题

jQuery点击复选框没有'；t检查firefox

相关文章：