Question

我想获取表单元素的更新DOM html字符串（例如<input type="text">，<input type="radio">，<input type="radio">，<textarea>）。

我发现了这个问题，我正在尝试使用gnarf编写的formhtml插件：

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

问题是它适用于Firefox和Chrome，但仅在IE8中有效（我还没有测试过其他版本）。

如果您在IE8中打开以下页面，您会看到有一个文本框，一些复选框和无线电。尝试输入一些文字，然后选中复选框和收音机。

然后点击“点击”按钮。

您可以看到，无论我是通过本机DOM对象的innerHTML属性还是使用插件的formhtml()函数检索html字符串。返回的html仅反映文本框的value属性中的更改，即使您在点击之前已经检查过它们，也永远无法看到checked="checked"和<input type="radio">中的<input type="checkbox">属性按钮。

为什么会发生这种情况，以及如何让它在IE中运行？

提前致谢。

修改对不起。我在问题中犯了一些错误，现在已经改写了。

修改创建示例代码是为了证明我的问题，但我犯了一些错误。 IE7和IE8都给出了预期的结果（我也再次进行了测试）。

在原始代码中，我不会直接在formhtml()上使用$('#div1')功能，而是在使用formhtml()之前克隆它：

alert($('#div1').clone().formhtml());

在使用jQuery 1.3.2的IE8上，返回的html没有反映这些复选框和无线电的检查状态，我从未想过clone()函数的问题就是我创建样本时的原因代码，我没有克隆它，因此无法证明实际问题。

更新的示例代码在这里（jQuery版本更改为1.3.2）：

http://jsfiddle.net/e9j6j/4/

这可能会显示IE8上的clone（）函数问题（我现在没有IE8，我将在家时测试它，稍后会报告）。

修改

我刚做了测试。这确实是IE8上jQuery 1.3.2中clone()函数的问题。它无法复制复选框和无线电的状态。将其更改为jQuery 1.5.1之后。它运作得很好。

Answer 1

我在IE8和IE7上的http://jsfiddle.net/e9j6j/1/尝试了测试用例，他们为我工作。

复制问题的步骤：

在IE浏览器中加载http://jsfiddle.net/e9j6j/1/。
在文本字段中输入文本，选中第一个单选按钮，选中第一个复选框。
按“点击”按钮。

预期结果：

两个警报都显示文本字段上的值和第一个广播中的“已检查”状态＆amp;第一个复选框。

实际结果：

正如所料。但是，请记住，IE对DOM的表示意味着checked="checked"实际上报告为CHECKED，但它是正确的。

<强>更新：

添加了一个测试，以确保可以将已检查状态复制到新的dom节点：

$('#btn1').click(function() {
    alert($('#div1').formhtml());
    alert(document.getElementById('div1').innerHTML);

    var div1 = $('#div1');
    div1.clone().insertAfter(div1);
});

这会创建另一组保留原始输入状态的字段。 View on jsfiddle

innerHTML忽略IE8中复选框和无线电输入的DOM更改

1 个答案: