Attaching events to dynamically created elements

[shuchow]

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?

 

[SAM]

(e-mail address removed) 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

 

[Gregor Kofler]

SAM meinte:

(e-mail address removed) a écrit :

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.

I doubt that. Could you provide a test case?

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.

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

 

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

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.

 

[shuchow]

On Jul 24, 6:10 pm, "C. (http://symcbean.blogspot.com/)"

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.