Events in dynamically created DIV

zpptydooh · Dec 17, 2006

Hi there,
I'd like to create two DIVs, one inside the other and capture the
click event of the inner one. Seems it should be trivial to do but I
somehow can't manage. Below here is the code I'm using [I know that it
does not work in IE but FireFox & Opera are enough for now].
Clicking on the 'Inner' div brings up the container's event with the
expected phase (3 = bubbling) but the Inner event is not fired at all.
I feel that ther is something obvious missing but I can't figure out
what.
I would be grateful for any help and/or pointers. Thanks.

START CODE:
<html>
<head>
</head>
<body>
<script>

var containerDiv = document.createElement('div');
containerDiv.style.border = '1px black solid';
containerDiv.innerHTML = 'Container before';

var theDiv = document.createElement('div');
theDiv.innerHTML = 'Inner';
theDiv.style.border = '1px red solid';
theDiv.addEventListener('click', function(e) {alert( 'Inner '+
e.eventPhase )}, false);

containerDiv.appendChild( theDiv );

containerDiv.innerHTML += 'Container after';
containerDiv.addEventListener('click', function(e) {alert(
'Container '+ e.eventPhase )}, false);
document.body.appendChild( containerDiv );

</script>
</body>
</html>

ASM · Dec 17, 2006

(e-mail address removed) a écrit :

Hi there,
I'd like to create two DIVs, one inside the other and capture the
click event of the inner one. Seems it should be trivial to do but I
somehow can't manage. Below here is the code I'm using [I know that it
does not work in IE but FireFox & Opera are enough for now].
Clicking on the 'Inner' div brings up the container's event with the
expected phase (3 = bubbling) but the Inner event is not fired at all.

Do not understand what you want
I get clicking in :
- main div (black bordered) : Container 2
- inserted div (red bordered) : Container 3

FF 2 on Mac

Elegie · Dec 17, 2006

(e-mail address removed) wrote:

Hi,

I'd like to create two DIVs, one inside the other and capture the
click event of the inner one. Seems it should be trivial to do but I
somehow can't manage.

You have bumped into one particular subtlety of innerHTML. To have your
code work as you expect, simply use DOM methods, not innerHTML.

containerDiv.innerHTML += 'Container after';

This statement first retrieves a serialized string of the HTML within
the 'containerDiv' element, then append the string 'Container after' to
this string and eventually evaluates the whole string back into HTML
elements, recreating new objects.

If your case, your handlers are not written in the first innerHTML
output, and therefore are not recreated when your inner div element is
recreated with the innerHTML final evaluation. Use createTextNode
instead of innerHTML.

The real interesting issue lies with what innerHTML includes in its
string representation (or excludes from it). Basically, there are many
things that it cannot or may not represent, following are three (non
exhaustive) examples that spring to mind.

[1] _Events_handlers_ are a particular area of the problem, the
possibility to add thousands of listeners to only one element,
and the difficulty to define an appropriate 'anonymous' attribute
name, probably makes them relevant not to output.

[2] _Attributes_pointing_to_objects_, and not primitive values, cannot
be represented while the execution is still active. The
serialization process implies to keep objects' identities, which
cannot be done if, in some way, the object can still be updated
or deleted. An 'exception' could be these native event attributes,
for which some additional logic is run at the document load.

[3] _Expando_properties_, i.e. properties not belonging to the set of
authorized attributes, may be represented (IE) or not (Mozilla and
Opera). Still, adding thousands of them could make IE encounter its
limit...

Kind regards,
Elegie.

Me · Dec 18, 2006

Elegie said:
(e-mail address removed) wrote:

Hi,

You have bumped into one particular subtlety of innerHTML. To have your
code work as you expect, simply use DOM methods, not innerHTML.

Thank you very much for the explanation.
For the records, here is the code that works:

var containerDiv = document.createElement('div');
containerDiv.style.border = '1px black solid';
containerDiv.appendChild( document.createTextNode('Container
before') );

var theDiv = document.createElement('div');
theDiv.style.border = '1px red solid';
theDiv.appendChild( document.createTextNode('Inner') );
theDiv.addEventListener('click', function(e) {alert( 'Inner '+
e.eventPhase )}, false);

containerDiv.appendChild( theDiv );

containerDiv.appendChild( document.createTextNode('Container
after') );

containerDiv.addEventListener('click', function(e) {alert(
'Container '+ e.eventPhase )}, false);
document.body.appendChild( containerDiv );

Filename undefined for Blob ?	1	Oct 28, 2023
Having trouble centering contents of td ?	3	May 2, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Image shifts to the right when export the page to pdf	4	May 5, 2023
JavaScript: how to keep track of the circle in canvas on specific path?	0	Mar 20, 2023
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Only one table shows up with the information	2	Mar 29, 2023

Events in dynamically created DIV

zpptydooh

ASM

Elegie

Me

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads