のjavascript：a.onclickを設定すると、私は動的にいくつかのリンクベースのコントロールを作成するには、このようなコードを使用して最初の実行

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 + = '< br />';ための構文糖である

：

div.innerHTML = div.innerHTML + '/> < BR'。

これにより、divの内容全体がHTMLにシリアル化され、小さな文字列が追加され、結果がHTMLに戻されるようになりました。たとえそれが完璧に機能したとしても、それは本当に非効率的です。

要素をシリアル化すると、JavaScriptプロパティ、イベントハンドラ、リスナなど、属性に関連付けられていない情報が失われます。あなたのonclickに別れを言いなさい。

「innerHTML + =」は使用しないでください。それは常に間違いです。

代わりに、ドキュメントに添付されていないスタンドアロンのdivにinnerHTMLを設定し、実際に必要な要素にchildNodesを1つずつ追加します。

しかし、この単純な何かのために、あなただけの標準DOMメソッドを使用する必要があり

：それはタイプミスであれば

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

Answer 2

あなたのコードはIE7とFirefoxでうまく動作します - それは壊れているものが/* ... */にあるに違いありません。