{"id":802,"date":"2006-05-30T18:27:52","date_gmt":"2006-05-30T22:27:52","guid":{"rendered":"http:\/\/wordpress.cephas.net\/?p=802"},"modified":"2006-05-30T18:27:52","modified_gmt":"2006-05-30T22:27:52","slug":"cant-add-hyperlink-with-onclick-to-ie-using-dom","status":"publish","type":"post","link":"https:\/\/cephas.net\/blog\/2006\/05\/30\/cant-add-hyperlink-with-onclick-to-ie-using-dom\/","title":{"rendered":"Can’t add hyperlink with onclick to IE using DOM"},"content":{"rendered":"

Last week I was attempting to dynamically add hyperlinks that contained an onclick<\/a> event to a document. The hyperlink, when written to the browser, would look something like this:
\n
\n<a href=\"#\" onclick=\"fireEvent(); return false;\">fire away!<\/a>
\n<\/code>
\nand I was using code that looked something like this to produce the links (and yes, I know about real links<\/a>):
\n
\n<script>
\nfunction createLink(id) {
\n  var node = document.getElementById(id);
\n  var aNode = document.createElement(\"a\");
\n  node.appendChild(aNode);
\n  aNode.setAttribute(\"href\",\"#\");
\n  aNode.setAttribute(\"onclick\", \"fireEvent(); return false;\");
\n  aNode.appendChild(document.createTextNode(\"fire away!\"));
\n}
\nfunction fireEvent() {
\n  alert('fire!');
\n}
\n<\/script>
\n<a href=\"#\" onclick=\"createLink('mytable'); return false;\">create link<\/a>
\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">
\n<tbody>
\n<tr>
\n  <td id=\"mytable\"><\/td>
\n<\/tr>
\n<\/tbody>
\n<\/table>
\n<\/code>
\nRunning the above code in Firefox worked fine, the fireEvent() method was invoked when you clicked the ‘fire away!’ link. The same exact code in IE didn’t work. Instead, it appeared that IE completely ignored the onclick event and just went with the value of the href attribute. The simple workaround, in this case at least, was to use the innerHTML <\/a>property of the cell I was adding the link to, so the createLink() function became:
\n
\nfunction createLink(id) {
\n  var node = document.getElementById(id);
\n  node.innerHTML = '<a href=\"#\" onclick=\"fireEvent(); return false;\">fire away!<\/a>';
\n}
\n<\/code>
\nAm I wrong in thinking that this is a bug? <\/p>\n

Related:<\/p>\n

Early event handlers<\/a>
\nJavascript: createElement, innerHTML and IE security zones<\/a>
\ncan’t put a row into a table in IE using DOM methods<\/a><\/p>\n


\nUpdated 7\/3\/2006: My boss Bill sent a note mentioned the behaviors library<\/a> which uses AOP techniques to reduce what the author calls ‘scattering’ and ‘tangling’ and would may also be a solution to the problem mentioned above. <\/font><\/p>\n","protected":false},"excerpt":{"rendered":"

Last week I was attempting to dynamically add hyperlinks that contained an onclick event to a document. The hyperlink, when written to the browser, would look something like this: <a href=”#” onclick=”fireEvent(); return false;”>fire away!<\/a> and I was using code that looked something like this to produce the links (and yes, I know about real … Continue reading Can’t add hyperlink with onclick to IE using DOM<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[29],"tags":[],"_links":{"self":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/posts\/802"}],"collection":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/comments?post=802"}],"version-history":[{"count":0,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/posts\/802\/revisions"}],"wp:attachment":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/tags?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}