ansaurus

Question

Javascript: Event does not fire unless element appended to document.body

Answer 1

A:

Your code works fine for me on firefox 3.0.5 and IE7. Are you sure your example is correct?

grepsedawk 2008-12-18 13:58:52

Ah, you beat me to it. I have tested in FF4, IE7, Opera 7 and Chrome,and it works. Can the OP please post a complete example? There must be something else that is wrong.

some 2008-12-18 14:02:21

Seconded: please post more code.

annakata 2008-12-18 14:05:00

ok, thanks guys, one minute...

2008-12-18 14:06:51

We are waiting ;)

some 2008-12-18 14:08:39

hi - ok i posted my code below (as an answer), you'll see that it only works with document.body.

2008-12-18 14:49:23

Answer 2

A:

Ok all, here is my code, apologies for the delay. A version with a work-around is posted underneath:

<html>
<head>

<script type="text/javascript">

function makeDiv() {
  var tooltip = document.createElement('div');

  // Give our tooltip a size and colour so we can see it
  tooltip.style.height = '200px';
  tooltip.style.position = 'absolute';
  tooltip.style.width = '200px';
  tooltip.style.backgroundColor = '#eee';

  // Register onclick listener
  tooltip.onclick = function() { alert('hello'); }

  // *** Comment one of these out: ***

  //document.body.appendChild(tooltip);
  document.getElementById('myDiv').appendChild(tooltip);
}

</script>
</head>

<body>


<div id="myDiv" 
     onmouseover="makeDiv();" 
     style="position: relative; top: 100px; left; 100px; border: 1px solid red; width: 200px;">

<span>my div text</span>

</div>

</body>
</html>

=================================== OK - so this works:

<html>
<head>

<script type="text/javascript">

function makeDiv() {
  var tooltip = document.createElement('div');

  // Give our tooltip a size and colour so we can see it
  tooltip.style.height = '200px';
  tooltip.style.position = 'absolute';
  tooltip.style.width = '200px';
  tooltip.style.backgroundColor = '#eee';

  // Register onclick listener
  tooltip.onclick = function() { alert('hello'); }

  // *** Comment one of these out: ***

  //document.body.appendChild(tooltip);
  document.getElementById('container').appendChild(tooltip);
}

</script>
</head>

<body>

<div id="container" style="border: 1px solid blue; float: left; ">
  <div id="myDiv" 
       onmouseover="makeDiv();" 
       style="position: relative; border: 1px solid red; width: 200px;">

       <span>my div text</span>
  </div>
</div>

</body>
</html>

2008-12-18 14:47:41

hi yes, i just updated that.really? not working in FF3.0.4

2008-12-18 14:51:58

The problem exists in FF3, IE7 and Chrome, but it works in Opera.

some 2008-12-18 14:55:17

Sorry about my comment earlier(I deleted it now). I rushed a little bit. I think I can replicate your problem on my computer. I'll see if I can answer this.

luiscubal 2008-12-18 14:57:23

ok i have a work around I think , I will add it to the bottom of my "answer" so you can see (in future I will simple edit my original post ;) ). The problem seems to be caused 'myDiv' being the same element that triggers the creating of 'tooltip' and the element to which tooltip is appended.

2008-12-18 15:02:49

Answer 3

+1 A:

Maybe you need to register the event handler after appending?

Kev 2008-12-18 14:55:20

hi - yes doesn't seem to make any difference unfortunately

2008-12-18 15:00:14

Ah, okay, thanks for trying it out...

Kev 2008-12-18 15:08:28

Answer 4

+1 A:

You're creating not only one but MANY divs. Try this instead(I hope you don't mind but I fixed the HTML and CSS too):

<html>
<head>

<script type="text/javascript">

function makeDiv() {
    if(!document.getElementById('tooltipDiv')){
     var tooltip = document.createElement('div');

     tooltip.id = "tooltipDiv";
     // Give our tooltip a size and colour so we can see it
     tooltip.style.height = '200px';
     tooltip.style.position = 'absolute';
     tooltip.style.width = '200px';
     tooltip.style.backgroundColor = '#eee';

     // Register onclick listener
     tooltip.onclick = function() { alert('hello'); }
     //tooltip.addEventListener("click", function(){ alert('hello'); }, false);

     // *** Comment one of these out: ***

     //document.body.appendChild(tooltip);
     document.getElementById('myDiv').appendChild(tooltip);
    }
}

</script>
</head>

<body>


<div id="myDiv" 
     onmouseover="makeDiv();" 
     style="position: relative; top: 100px; left: 100px; border: 1px solid red; width: 200px;">

<span>my div text</span>

</div>

</body>
</html>

luiscubal 2008-12-18 15:00:34

I concur, many divs are created.

some 2008-12-18 15:06:01

ah of course! becuase I am triggering mouseover everytime i go to click...

2008-12-18 15:14:03

luiscubal - and everyone - thank you very much for the help

2008-12-18 15:15:34

Update: yes, because tooltip is a child of 'myDiv' it also triggers the mouseover.

2008-12-18 15:24:54

Answer 5

A:

Casey 2009-01-29 17:19:14

ansaurus

tags:

views:

answers:

Javascript: Event does not fire unless element appended to document.body

related questions