By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,128 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

Attaching events to dynamically created elements

P: n/a
Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. Say I have a function,
dynamicallyCreateElement(), that creates an element. I want that new
element to have an onclick that calls another function. So it looks
like this:

function dynamicallyCreateElement() {
....
element.onclick = myFunction;

....
}

function myFunction() {
...

};

The problem is that myFunction will be called during the execution of
dynamicallyCreateElement(), and not just the onclick for the element.

Instead, I have tod o this:
function dynamicallyCreateElement() {
....
element.onclick = function() { myFunctions())_;;

....
}

Why does the first one automatically execute myFunction, and what
exactly does
element.onclick = function() do?
Jul 24 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
SAM
sh*****@gmail.com a écrit :
Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. Say I have a function,
dynamicallyCreateElement(), that creates an element. I want that new
element to have an onclick that calls another function. So it looks
like this:

function dynamicallyCreateElement() {
...
element.onclick = myFunction;
here you tell to execute the function

element.onclick = 'myFunction()'; // could work
}

function myFunction() {
};

The problem is that myFunction will be called during the execution of
dynamicallyCreateElement(), and not just the onclick for the element.

Instead, I have tod o this:
function dynamicallyCreateElement() {
...
element.onclick = function() { myFunctions())_;;
not exactly (see below)
}

Why does the first one automatically execute myFunction,
because that works like that
as it does if you do

window.onload = alarm;

function alarm() { alert('OK'); }

and what exactly does
element.onclick = function() do?

The last one, you assign an annonymous function that will call anothrer
one on element's event 'click'

element.onclick = function() { myFunction(); };

element.onclick = 'myFunction();';

is same as

<tag onclick="myFunction();">
myFunction() would have to be declared outside of the function
dynamicallyCreateElement

--
sm
Jul 24 '08 #2

P: n/a
SAM meinte:
sh*****@gmail.com a écrit :
>Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. Say I have a function,
dynamicallyCreateElement(), that creates an element. I want that new
element to have an onclick that calls another function. So it looks
like this:

function dynamicallyCreateElement() {
...
element.onclick = myFunction;

here you tell to execute the function
Err... What? A reference to a function is assigned to the onclick
property - nothing gets executed. element.onclick() would call the
function, or element.onclick = myFunction(); would assign the result of
myFunction to the onclick property.
element.onclick = 'myFunction()'; // could work
Yuck! And I doubt it "works" cross-browser.
>}

function myFunction() {
};

The problem is that myFunction will be called during the execution of
dynamicallyCreateElement(), and not just the onclick for the element.
I doubt that. Could you provide a test case?
>Instead, I have tod o this:
function dynamicallyCreateElement() {
...
element.onclick = function() { myFunctions())_;;
Wrap your function into another anonymous function I suppose - the
result should be the same. However, your "{ myFunctions())_;;" will only
result in a syntax error.
>Why does the first one automatically execute myFunction,

because that works like that
as it does if you do

window.onload = alarm;
This executes alarm when the load event fires. Not when you assign the
function, which seems to be the "problem" of the OP. I suppose he only
forgot some parantheses.
element.onclick = 'myFunction();';

is same as

<tag onclick="myFunction();">
No.
myFunction() would have to be declared outside of the function
dynamicallyCreateElement
No.

Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Jul 24 '08 #3

P: n/a
On Jul 24, 5:35*pm, shuc...@gmail.com wrote:
Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. *Say I have a function,
dynamicallyCreateElement(), that creates an element. *I want that new
element to have an onclick that calls another function. *So it looks
like this:

function dynamicallyCreateElement() {
...
element.onclick = myFunction;

...

}

function myFunction() {
..

};

The problem is that myFunction will be called during the execution of
dynamicallyCreateElement(), and not just the onclick for the element.
No it won't; you're confusing

element.onclick = myFunction;

and element.onclick = myFunction();

C.
Jul 24 '08 #4

P: n/a
On Jul 24, 6:10*pm, "C. (http://symcbean.blogspot.com/)"
<colin.mckin...@gmail.comwrote:
ot just the onclick for the element.
>
No it won't; you're confusing

element.onclick = myFunction;

and element.onclick = myFunction();

C.
I think I meant element.onclick = myFunction(this); in my original
code, which definitely does execute myFunction().

After reading Peter-Paul Koch's page about the "this" keyword (http://
www.quirksmode.org/js/this.html) I got a much better understanding of
what I needed to do. I needed handler functions that would work for
both adding events using .onclick and inline.

Inline is handled by <span onclick="editHandler(this)"and
element.onclick = editHandler; handles adding the event in the table
row creation function. Inside editHandler, "this" is references the
span that I'm clicking on, which is what I really needed in the first
place. Thanks for all the responses.
Jul 25 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.