Can’t add hyperlink with onclick to IE using DOM

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 links):

<script>
function createLink(id) {
  var node = document.getElementById(id);
  var aNode = document.createElement("a");
  node.appendChild(aNode);
  aNode.setAttribute("href","#");
  aNode.setAttribute("onclick", "fireEvent(); return false;");
  aNode.appendChild(document.createTextNode("fire away!"));
}
function fireEvent() {
  alert('fire!');
}
</script>
<a href="#" onclick="createLink('mytable'); return false;">create link</a>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
  <td id="mytable"></td>
</tr>
</tbody>
</table>

Running 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 property of the cell I was adding the link to, so the createLink() function became:

function createLink(id) {
  var node = document.getElementById(id);
  node.innerHTML = '<a href="#" onclick="fireEvent(); return false;">fire away!</a>';
}

Am I wrong in thinking that this is a bug?

Related:

Early event handlers
Javascript: createElement, innerHTML and IE security zones
can’t put a row into a table in IE using DOM methods


Updated 7/3/2006: My boss Bill sent a note mentioned the behaviors library 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.

This entry was posted in JavaScript. Bookmark the permalink.

18 Responses to Can’t add hyperlink with onclick to IE using DOM

  1. Paul Bourdeaux says:

    I encountered the exact same problem. I wonder if there is some type of registry for javascrip functions that is built when the page loads.

  2. Dennis Nagel says:

    Try appending the child before attaching the functions to it… I read somehere that there are many similar props and methods that IE chucks away if they are added prior to the insertion into the DOM.

    HTH, D.

  3. Dennis Nagel says:

    ok, so I actually tried it this time : -)

    heres what I came up with…

    var addEvt = function(obj,evt,fn){
    if (obj.attachEvent)
    obj.attachEvent(‘on’+evt,fn)
    else
    obj.addEventListener(evt,fn,obj)
    }
    function createLink(id) {
    var node = document.getElementById(id);
    var aNode = document.createElement(“a”);
    aNode.setAttribute(“href”,”#”);
    aNode.appendChild(document.createTextNode(“fire away!”));
    addEvt(aNode,”click”, eval(“fireEvent”))
    node.appendChild(aNode);
    // using eval above in case you pulling this stuff from a DB as text
    return false;
    }
    function fireEvent() {
    alert(‘fire!’);
    return false;
    }

    create link

  4. Dennis Nagel says:

    last try…

    <html>
    <head>
    <script type="text/javascript">
    var addEvt = function(obj,evt,fn){
    if (obj.attachEvent)
    obj.attachEvent('on'+evt,fn)
    else
    obj.addEventListener(evt,fn,obj)
    }
    function createLink(id) {
    var node = document.getElementById(id);
    var aNode = document.createElement("a");
    aNode.setAttribute("href","#");
    aNode.appendChild(document.createTextNode("fire away!"));
    addEvt(aNode,"click", eval("fireEvent"))
    node.appendChild(aNode);
    // using eval above in case you pulling this stuff from a DB as text
    return false;
    }
    function fireEvent() {
    alert('fire!');
    return false;
    }
    </script>
    <title></title>
    </head>
    <body>
    <a href="#" onclick="return createLink('mytable');">create link</a>
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tbody>
    <tr>
    <td id="mytable"></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  5. petron says:

    Dennis,

    On you latest version above here, how would you pass vars to “fireEvent”?

    For example if I need to this fireEvent(field1,field2)?

    Thanks for your help.

  6. Neil says:

    Thanks man, I was running into the same problem. This is DEFINITELY a bug. If not a bug, a TERRIBLE design flaw. terrible.

  7. Kishore says:

    Hi,

    did you find any solution to above issue where we would like to pass vars to function associated to dynamically created link?

    Appreciate your response.

  8. Snowcore says:

    Thanks a lot for solution!
    I hate this IE !!!

  9. Marian says:

    The solution is in IE:
    instead of element.setAttribute(‘eventName’,'toDo’)
    you must use
    element['eventName']=new Function(‘toDo’);

    Ex:
    element['onclick']=new Function(‘doMyJob(this)’);

    function doMyJob(object)
    {
    alert(‘objectId=’+object.id);
    }

  10. capslock says:

    THANX Marian!
    Finally something that works :)

  11. Support says:

    When you fireEvents in IE you have the option to create and pass a new event object.

    The event object, like all dhtml objects, allows you to add your own custom properties an arrays.

    So when an object receives an event that you fired your custom properties will be available like this… event.myprop1, event.myprop2 etc.

  12. Anil Kumar says:

    Thanks Every one, especially Marian for making our life more simpler of IE problem.

  13. Rich says:

    Thanks for the solution. I don’t think that approach would have occurred to me.

  14. fornetti says:

    I do not believe this

  15. jino koshy says:

    Thanks for the solution, Marian. I was really caught up solving the add hyperlink with onclick to IE using DOM. Yours is a perfect solution,
    element['onclick']=new Function(’doMyJob(this)’);

  16. Varol ÇOKÜNLÜ says:

    Thanks for the solution Marian. I had trouble in calling an event when the hyperlink is clicked. But, I applied your solution and overcame the problem I faced.

  17. flashfs says:

    Yeah, thanks Marian. Year 2010 and I came with this same problem

  18. suresh says:

    var cellRight = row.insertCell(1);
    var el2 = document.createElement(‘input’);
    el2.type = ‘text’;
    el2.name = ‘txtEditLLName’ + totallandowner;
    el2.id = ‘txtEditLLName’ + totallandowner;
    el2.className = ‘fieldstext’;
    cellRight.appendChild(el2);

    How can i use this coding without using append function i should use this code for IE

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>