CODEWITHSUNDEEP
javascripteventsevent-handling
Don
Don

Reputation:

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

I dynamically create an element (div) in javascript, on which i register an event listener:

var tooltip = document.createElement('div');
tooltip.onclick = function() { alert('hello'); }

Now, if I attach this element to the document body:

document.body.appendChild(tooltip);

all is well and the event is captured. However (for positioning purposes) i want to attach this element to a (static) sub-element within my page, e.g:

document.getElementById('id').appendChild(tooltip);

and the element is generated and positioned correctly - but the onclick event now is no longer captured. Any thoughts? This is x-browser, so i must be missing something.

Thanks, Don.

Upvotes: 0

Views: 1701

Answers (5)

Casey
Casey

Reputation: 2045

Here is some code to remove the tooltip for onmouseout.

Give your toolTip an ID when creating it:

toolTip.setAttribute('id','toolTip');

Then for onmouseout

function removeDiv(container) {
    var toolTip = document.getElementById('toolTip');
    document.getElementById(container).removeChild(toolTip);
}

Upvotes: 0

Kev
Kev

Reputation: 16321

Maybe you need to register the event handler after appending?

Upvotes: 1

Don
Don

Reputation:

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>

Upvotes: 0

luiscubal
luiscubal

Reputation: 25121

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>

Upvotes: 1

grepsedawk
grepsedawk

Reputation: 6059

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

Upvotes: 0

Related Questions