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.
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.
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.
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
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>
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.
Thanks man, I was running into the same problem. This is DEFINITELY a bug. If not a bug, a TERRIBLE design flaw. terrible.
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.
Thanks a lot for solution!
I hate this IE !!!
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);
}
THANX Marian!
Finally something that works 🙂
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.
Thanks Every one, especially Marian for making our life more simpler of IE problem.
Thanks for the solution. I don’t think that approach would have occurred to me.
I do not believe this
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)’);
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.
Yeah, thanks Marian. Year 2010 and I came with this same problem
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