Question

在Safari中，如果我通过XHR（ajax）加载一段html，则浏览器不会将已选中=“已选中”属性的单选按钮呈现为已选中。

我通过ajax获取的html：

<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">

浏览器呈现两个未经检查的单选按钮。如果我直接从普通的html文件（没有ajax）加载完全相同的代码，单选按钮会按原样呈现，最后一个处于检查状态。

出了什么问题，这是一个已知的错误吗？有可用的修复方法吗？

编辑：

进一步探讨这看起来像是一个浏览器错误，到目前为止我无法使用jQuery Post处理修复它，任何帮助都可以理解..这是我发现的：

我有一个页面通过ajax拉入某个表单元素。 HTML是这样的：

<input type="checkbox" name="checktest">
<input type="checkbox" name="checktest" checked="checked">

<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">

在拉入表单元素后，复选框渲染正确，但无线电都呈现为未标记。现在，如果我运行以下jQuery命令（来自Safari 5控制台）：

$('#activemodules input[checked="checked"]');

..它返回一个包含一个复选框的对象。

但如果我运行命令：

$('#activemodules input[value="on"]');

它实际上返回了正确的对象，它甚至显示其outerHTML属性如下：

outerHTML: "<input type="radio" name="radiotest" value="on" checked="checked">"

现在，如果我这样做：

 $('#activemodules input[value="on"]').attr('checked','checked');

Safari得到它，并正确呈现它。我想我只需要传递一个data-ischecked =“true”属性，并在加载ajax位之后使用它来捕捉并“重新检查”所有单选按钮..但是，即使我能做到这一点，我想听听有关此事的任何意见或建议。

Answer 1

这就是我的解决方案的结果：

首先，我将data-ischecked =“1”属性添加到被检查的无线电中：

<input type="radio" name="foo" data-ischecked="1" value="bar" checked="checked">

然后，在ajax调用成功并完成之后我运行它：

$('#myradios :radio')
.each(function(){
    if( $(this).data('ischecked') ){
        $(this).attr('checked','checked');
        $(this).removeAttr('data-ischecked');
    }
});

这似乎工作得很好..但我发现了其他一些重要的东西：

如果我调用数据属性只是数据检查而不是数据缺失它不能工作，也许这是一个保留名称？

还;如果我在更广泛的选择范围上运行操作：

$(':radio')
    .each ...

然后它也没有工作

我不知道为什么，但是添加了无线电的父元素的id，这也是ajax调用返回到selecor范围的html的一部分，如下所示：

$('#myradios :radio')

让它发挥作用..

Answer 2

我发现mikkelbreum的解决方案只有在我没有在注入AJAX的代码中包含“checked”属性时才有效。

<input type="radio" name="foo" data-ischecked="1" value="bar">

Safari Ajax bug？检查无线电未检查

2 个答案: