innerHTML的使用遇到的一个问题

在项目中涉及到一种场景：提交某个表单（id=source）后，利用ajax输出一个新的表单（id=target）并显示在一个id为A的容器内并自动提交。这是项目内一个在线支付的一个功能。

实现很简单，ajax提交id=source表单后，返回一个新表单id=target，然后利用innerHTML将新表单数据写入到id=A的容器内。

但在实际做的时候发生了一个意外，在firefox（22.0）内是没有错误的最终会跳转到target的表单自动提交，但在Chrome（29）无法不能运行点击提交表单id=source后无任何反应，在IE8提交时，会显示

此网页上的错误可能会使它无法正确运行。未知的运行时错误

折腾了快2小时，死活没发现什么端倪，想到之前项目内的其他一个类似的模块没什么问题，于是对照着找问题，最终发现，是因为id=A是放在表单id=source内的缘故。

<form id="source">
......
<div id="A"></div>
......
</form>

将容器A移除原始表单(id=source)就没问题了。

<form id="source">
......
 
......
</form>
<div id="A"></div>

这是为什么呢？原来很简单，因为ajax插入新表单后破坏了页面结构，导致form内嵌套form

<form id="source">
……
<div id="A"><form id="target"></form></div>
……
</form>

这样的结构当然是有问题的啦。

就此问题解决。

延展思路，举一反三，如果要使用innerHTML时新引入的结构一定要不能破坏原来的结构，否则就会出错。至于怎么叫“一定要不能破坏原来的结构”？很简单，就是把ajax过来的数据当成当前页面的一部分，看看它是否遵循规范就可以了。

 

该日志未加标签