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
simple

Code: Select all

ea.onclick = myFunction;
will do it.

Posted: Wed Oct 11, 2006 10:19 am
by onion2k
n00b Saibot wrote:simple

Code: Select all

ea.onclick = myFunction;
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 :oops: