To dynamically change or add an “onclick” event handler to an element, try:
var el = document.getElementById('foo');
el.onclick = showPopup;
//NOTE: showPopup();
//or showPopup(param);
//will NOT work here.
//Must be a reference to a function,
//not a function call.
function showPopup() {
var popup = window.open(this.href, "popup", "height=800,width=600");
popup.focus();
return false;
}
Brent
July 7, 2009 at 2:47 am
Hi, i wanna add 2 of the links that changes 2 frames together. Is it possible to name them differently so that they do not link to the same pages?
darko
October 4, 2009 at 6:15 pm
Hey, I had the same problem that chad was experiencing that was never solved here so I figured I would make a post because I found the answer searching through the thread.
My first task was to create a button that generates as many input fields and corresponding submit buttons as the user wanted. Each input would need its own id, such as input1, input2, input3, etc and each button would need to use these ids in its own onclick event. The problem was that for some reason when I used something like:
button.onclick = function(){someFunctionName(‘input’+counter);};
or
button.onclick = someFunctionName;
it would use only the final counter value in the dynamically generated button’s onclick event. However when I changed the buttons onclick to:
button.onclick = new Function(“someFunctionName(‘input” + counter + “‘)”); it worked like a charm
so the moral of the story: use the new Function() method if you need dynamically generated onclick events for dynamically generated elements.
thanks to everyone that helped me find the solution
Joshua
October 14, 2009 at 12:34 pm
Ah, element.onclick has to be assigned a _function_. Thanks, you saved my bacon.
I did it with a function declaration:
function theOnclickFunction() {
… code …
}
theElementy.onclick = theOnclickFunction;
but I like darko’s anonymous function approach:
theElement.onclick = function() { …code… }
Mduduzi
November 6, 2009 at 5:34 am
Thanks Darko… your a genius :)
sagar
November 12, 2009 at 6:58 am
thanks
simply greate
swapana
December 3, 2009 at 10:29 pm
thanks alot Brent!! you have save my lots of time
i was doing rnd on these from 2days and got no results
thanks alot
chovy
December 19, 2009 at 1:21 am
reserved words…PITA.
Tester
December 28, 2009 at 3:42 am
Thanks Buddy, u saved a lot of time
SAGAR SHINDE
December 31, 2009 at 4:14 am
Thanks
short and sweet
Attila
December 31, 2009 at 12:16 pm
It is fine, but how can i assign a function that would take the “this” as parameter?
in normal html it would look like:
ffggg
how can i assign this onclick function dynamically, with the “this” parameter pointing to the right object?
And the worst point of that, it should work in chrome as well, the function assignment didn’t worked at all yet.
ayhtut
January 9, 2010 at 12:18 am
function A(me) {
alert(‘A’);
me.onclick = new Function(“B(this)”);
}
function B(maythaw) {
alert(‘B’);
maythaw.onclick = new Function(“A(this)”);
}
Kelvin
January 14, 2010 at 9:13 am
Thank you ayhtut. I spent AGES on this by trying to set the OnClick attribute – to no avail!
Your example works a treat :)
Mandar
January 23, 2010 at 3:04 am
thank you buddy for suggesting call by refrence…
worked very well for me. i’ve been stuck in this cupple of hrs. Solved my prob now
Cat
January 25, 2010 at 2:19 pm
Thanks darko! Lifesaver man.
Kc
January 26, 2010 at 10:21 am
Thanks a lot!! This actually saved me a lot of time, after trying to figure out what was wrong with my onclick attribute.
Deepa
January 29, 2010 at 3:28 am
If I have to pass a variable other than ‘this’ how do I go about it…
Following is the snippet
var li = document.createElement(“li”);
li.innerHTML = ”+response.items[i].name;
var URI=response.items[i].URI;
li.onclick= new Function(“callStatus(URI)”);
list.appendChild(li);
I get an error saying “URI is undefined”
Josh
February 9, 2010 at 1:08 pm
el.setAttribute(‘onclick’,'showPopup());
Josh
February 9, 2010 at 1:11 pm
el.setAttribute(‘onclick’,’showPopup()’);
sorry, left off the last single quote. You can dynamically add the onclick using .setAttribute. Passing parameters works too.
el.setAttribute(‘onclick’,’showPopup(‘ + someparam + ‘)’);
John
February 15, 2010 at 3:42 am
Thank you Darko. Yoursolution saved a lot of work for me.
François
March 1, 2010 at 7:30 am
cool! Josh
Thank a lot!
it’s work (setAttribute(‘onclick’,'fonction with parameters’)
Res2
March 1, 2010 at 9:19 am
how beautiful short code, thank you very much
diabl0
March 31, 2010 at 8:28 pm
hii
darko your solution didn’t work for me :s i’ve tried in vain !!
==>
document.getElementById(j+’ref’).onclick=new function(){“changeBg(“+j+”,”+k+”)”;};
j and k are numbers !!
diabl0
March 31, 2010 at 8:34 pm
i’ve also tried this :
document.getElementById(j+’ref’).setAttribute(‘onclick’, ‘changeBg(‘+j+’,'+k+’)');
but no result !!:S
Ami
April 9, 2010 at 10:20 pm
hi… I am dynamically inserting a button using javascript. and i want to call a function on click of that button. how to do that??
what i have tried is :
var up = document.createElement(‘INPUT’);
up.setAttribute(“value”,”update”);
up.setAttribute(“id”,”update_”+e);
up.setAttribute(“type”,”button”);
up.setAttribute(“onclick”=updateEdit(e));
but its not working… can anyone help me?
ABC
April 9, 2010 at 10:29 pm
found problem… it shld be like
up.setAttribute(“onclick”,’updateEdit(‘+e+’)');
insted of
up.setAttribute(“onclick”=updateEdit(e));
Dynamically Change onclick Event with parameters - Knight.Liao's Tale
April 24, 2010 at 8:14 am
[...] http://www.chovy.com/web-development/javascript-dynamically-change-onclick-event/ 2. http://stackoverflow.com/questions/748941/setattribute-onclick-and-cross-browser-compatability [...]
Floschx
May 26, 2010 at 8:08 am
Great post – helped for SharePoint NewForm.aspx – one of the best descriptions I found on the net…
Kevin
May 26, 2010 at 2:46 pm
Thanks for the code and explanation.
How can I reference a function and include a parameter.
I need to include two inputs, xmlDoc and location, for my saveFile function. Without those inputs, my saveFile won’t work.
var myButton = document.getElementsByName(“saveButton”)[0];
myButton.onclick = saveFile(xmlDoc,location);
Thanks,
Kevin
Athahar
May 28, 2010 at 1:54 am
Hey kevin,
I think you can try
mybutton.onclick = new Function(“saveFile(” + xmlDoc + “,” + location + “ )”);
Mimi
May 28, 2010 at 7:56 am
YOU ROCK DARKO!!!
» dynamically generated onclick events for dynamically generated elements Shoel's i-log book
July 8, 2010 at 4:08 am
[...] Javascript: Dynamically Change onclick Event « Chovy’s Blog dynamically generated onclick events for dynamically generated elements [...]