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过来的数据当成当前页面的一部分,看看它是否遵循规范就可以了。

 

该日志未加标签

*

Deepseath Modified from Green Hope Theme · Proudly powered by WordPress · 津ICP备09005418号  津公网安备 12010302001005号