Question

我使用这样的代码来动态创建一些基于链接的控件：

<script type="text/javascript">
    function BuildControls (id, ...)
    {  
        var div = document.getElementById (id);  
        /* some stuff with var sp=document.createElement('span'); */
        var a = document.createElement ('a');
        a.innerHTML = on ? 'Cancel' : captions_do[i];
        a.className = class_do;
        a.style.display = on2 ? '' : 'none';
        a.id = 'iAccept'+id+'_'+i+'Control';
        div.appendChild (sp);
        div.innerHTML+='<br />';
        div.appendChild (a);
        a.onclick = function () {alert ('wtf')};
        div.innerHTML+='<br />';
    }
</script>
...
<div id="someid"></div>  
<script type="text/javascript">  
    BuildControls ('someid', ...);
</script>

所以当我点击链接时，它什么也没做。如果我明确地调用a.onclick（），它就可以了。有什么问题？

Answer 1

div.innerHTML + ='＆lt; br /＆gt;';

这是语法糖：

div.innerHTML = div.innerHTML +'＆lt; br /＆gt;';

这使得更清楚地发生了什么：您只是将div的整个内容序列化为HTML，添加了一个小字符串，并将结果解析回HTML。即使它完美无瑕地工作，那也是非常低效的。

序列化元素时，会丢失附加到其上的任何非基于属性的信息，包括JavaScript属性，事件处理程序和侦听器。跟你的onclick说再见。

永远不要使用“innerHTML + =”。这总是一个错误。

另一种方法是在未附加到文档的独立div上设置innerHTML，然后将其childNodes逐个附加到您真正想要的元素。

但是对于这么简单的事情，你应该只使用标准的DOM方法：

div.appendChild(document.createElement('br'));

Answer 2

您发布的代码在IE7和Firefox中运行良好 - /* ... */中必须有一些内容正在破坏它。

javascript：设置a.onclick在首次运行时不起作用

2 个答案: