Page 1 of 1
Attaching an event to an anchor
Posted: Wed Oct 11, 2006 4:29 am
by onion2k
I need to attach an onclick event to an anchor. I've got some code working, but only in FF. IE is ignoring it.
Code: Select all
ea = document.createElement("a");
ea.href = '#';
ea.setAttribute('onclick','myFunction')');
ea.appendChild(document.createTextNode('Click me'));
I need to replace "ea.setAttribute('onclick','myFunction')');" with something that will work across browsers, or I need to detect the browser the client is using and tailor the code for them. I've tried attachEvent() and it didn't work. The event kept firing without a click. Odd. Have anyone tried this sort of thing before?
(Note: I know I could use innerHTML, but I really, really don't want to leave the W3 DOM spec behind)
Posted: Wed Oct 11, 2006 4:43 am
by Chris Corbyn
Code: Select all
if (document.captureEvents) document.captureEvents(Event.CLICK);
ea.onclick = myFunction;
Posted: Wed Oct 11, 2006 5:23 am
by onion2k
That seems to fire myFunction on every click event on the page. I need to specifically fire the event when ea is clicked.
Posted: Wed Oct 11, 2006 9:40 am
by n00b Saibot
Posted: Wed Oct 11, 2006 10:19 am
by onion2k
n00b Saibot wrote:simple
will do it.
That nearly works, except the function gets called. If I do:
Code: Select all
ea.onclick = function() { myFunction; }
It works ok. I've a feeling nasty something like that causes a memory leak in IE though.
Next question, how can I pass parameters to myFunction? I need to generate these links in a loop, and call myFunction(x);, where x is the counter. So each link is to the same function but with a different number. It seems to make them all call the function with the same number if I use:
Code: Select all
for (var h=0; h <= 5; h++) {
ea = document.createElement("a");
ea.href = '#';
ea.onclick = function() { myFunction(h); }
ea.appendChild(document.createTextNode(h+1));
el = document.createElement("li");
el.appendChild(ea);
ul.appendChild(el);
}
They all call myFunction(5).
Posted: Wed Oct 11, 2006 10:27 am
by n00b Saibot
because they all aren't run until they have been assigned. once they are done assigning, they all run myFunction(h). now what is the final value of h, 5

so they all call 5.
I am sure I saw a workaround on Sitepoint & this is the one I posted:
Code: Select all
for (var h=0; h <= 5; h++)
{
ea = document.createElement("a");
ea.href = '#';
ea.linkNo = h;
ea.onclick = function() { myFunction(this.linkNo); }
ea.appendChild(document.createTextNode(h+1));
el = document.createElement("li");
el.appendChild(ea);
ul.appendChild(el);
}
Posted: Wed Oct 11, 2006 10:46 am
by onion2k
Awesome, that works.
Do these anonymous functions that I'm attaching all over the place get removed from memory if I call removeChild(ea)? This is a small aspect of a big application, and I don't want to get a long way in and find I'm leaking memory all over the place.
Posted: Wed Oct 11, 2006 11:01 am
by n00b Saibot
ever came across
delete?
Code: Select all
delete ea.onclick;
removeChild(ea);
Posted: Wed Oct 11, 2006 11:40 am
by onion2k
n00b Saibot wrote:ever came across delete?
Actually I haven't. Thanks for pointing it out.
Posted: Wed Oct 11, 2006 11:46 am
by n00b Saibot
onion2k wrote:n00b Saibot wrote:ever came across delete?
Actually I haven't. Thanks for pointing it out.
I'm sorry if it came out as offence
