Attaching events to dynamically created elements

[shuchow@gmail.com]

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

function dynamicallyCrea teElement() {
....
element.onclick = myFunction;

....
}

function myFunction() {
...

};

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

Instead, I have tod o this:


function dynamicallyCrea teElement() {
....
element.onclick = function() { myFunctions())_ ;;

....
}

Why does the first one automatically execute myFunction, and what
exactly does
element.onclick = function() do?

[SAM]

Re: Attaching events to dynamically created elements

shuchow@gmail.c om a écrit :

Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. Say I have a function,
dynamicallyCrea teElement(), that creates an element. I want that new
element to have an onclick that calls another function. So it looks
like this:
>
function dynamicallyCrea teElement() {
...
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
dynamicallyCrea teElement(), and not just the onclick for the element.
>
Instead, I have tod o this:
>
>
function dynamicallyCrea teElement() {
...
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="myFunc tion();">


myFunction() would have to be declared outside of the function
dynamicallyCrea teElement

--
sm

[Gregor Kofler]

Re: Attaching events to dynamically created elements

SAM meinte:

shuchow@gmail.c om a écrit :

>Hi, sorry for the basic question, but can someone explain to me some
>basic event attachment process. Say I have a function,
>dynamicallyCre ateElement(), that creates an element. I want that new
>element to have an onclick that calls another function. So it looks
>like this:
>>
>function dynamicallyCrea teElement() {
>...
>element.onclic k = 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
>dynamicallyCre ateElement(), and not just the onclick for the element.

I doubt that. Could you provide a test case?

>Instead, I have tod o this:
>>
>>
>function dynamicallyCrea teElement() {
>...
>element.onclic k = 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="myFunc tion();">

No.

myFunction() would have to be declared outside of the function
dynamicallyCrea teElement

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

[C. (http://symcbean.blogspot.com/)]

Re: Attaching events to dynamically created elements

On Jul 24, 5:35 pm, shuc...@gmail.c om wrote:

Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process.  Say I have a function,
dynamicallyCrea teElement(), that creates an element.  I want that new
element to have an onclick that calls another function.  So it looks
like this:
>
function dynamicallyCrea teElement() {
...
element.onclick = myFunction;
>
...
>
}
>
function myFunction() {
..
>
};
>
The problem is that myFunction will be called during the execution of
dynamicallyCrea teElement(), and not just the onclick for the element.
>

No it won't; you're confusing

element.onclick = myFunction;

and element.onclick = myFunction();

C.

[shuchow@gmail.com]

Re: Attaching events to dynamically created elements

On Jul 24, 6:10 pm, "C. (http://symcbean.blogsp ot.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="editHa ndler(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.